JavaScript实现iframe自动高度调整和不同主域名跨域

更新时间：2026-02-18 21:11:27作者：fang

大家都知道Js有同源策略，就是主域名不同嵌套的iframe不允许Js通信的。

比如我有一个网站，网站中要嵌入其网站的页面。那么我可以使用iframe引用第三方网站的地址即可。

但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合，又例如第三方网站使用了瀑布流插件，要滚动加载自动计算高度，那么先说跨域：iframe主域名不同跨域方法，假如网站 A.com B.com A 里面放入一个iframe 引用了B.com，这种情况下B.com里面的Js是无法访问到A.com的。JS跨域必须是同源，就是同一个主域名，那肿么办呢？

我们可以在B.com中在引入一个iframe，暂且叫C吧这个iframe加载A.com中的一个网页。这样同源就有了B.com中的iframe中的网页就可以和A.com通讯了。下面只要B和C通讯，让C和A通讯就完成B->A通讯，这样当B高度变化时通知C，让C通知A把iframe高度调整。

B和C通讯，其实通过url地址就可以实现通讯了，B.com iframe设置为隐藏，改变src地址时候C就可以接收。

废话不说了上代码

A.com/index.html

<html>

var test = function() {

$('#h1').html('test');

}

</script>

<body>

<h1 id="h1">nba.alltosun.net</h1>

</body>

</html>

B.com/index.html

<html>

<body>

<h1>**.appsina.com</h1>

$(function(){

window.ifrH = function(e){

var searchUrl = window.location.search;

var b = null;

var getParam = function(url, param) {

var q = url.match(new RegExp( param + "=[^&]*")),

n = "";

if (q && q.length) {

n = q[0].replace(param + "=", "");

}

return n;

}

var f = getParam(searchUrl,"url"),

h = getParam(searchUrl, "ifmID"),

k = getParam(searchUrl, "cbn"),

g = getParam(searchUrl, "mh");

var iframeId = 'testiframe';

var iframe = document.getElementById(iframeId);

var divId = 'alltosun';

if (!iframe){

var iframe = document.createElement('iframe');

iframe.id = iframeId;

iframe.style.display = "none";

iframe.width = 0;

iframe.height = 0;

document.body.appendChild(iframe);

}

if (e && e.type == "onload" && h) {

b.parentNode.removeChild(b);

b = null;

}

if (!b) {

b = document.createElement("div");

b.id = divId;

b.style.cssText = "clear:both;"

document.body.appendChild(b);

}

var l = b.offsetTop + b.offsetHeight;

iframe.src = (decodeURIComponent(f) ||

"http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + ( (+ new Date()));

if (e && e.type =="onload") {

window.onload = null;

}

window.onload = function() {

ifrH({type: "onload"});

}

// ifrH();

$('button').click(function(){

$('div').show();

ifrH();

})

</script>

</body>

</html>

C 代理文件

var search = window.location.search,

getSearchParam = function (search, key) {

var mc = search.match (new RegExp ( key + "=([^&]*)") ),

ret="";

mc && mc.length && (ret = mc[0].replace( key + "=",""));

return ret;

// 参数h

h = getSearchParam(search,"h"),

ifmID = getSearchParam(search,"ifmID"),

cbn = getSearchParam(search,"cbn"),

// 宽高

mh = getSearchParam(search,"mh") || h,

isFunction = function(fn){

return !!fn && !fn.nodeName && fn.constructor != String

&& fn.constructor != RegExp && fn.constructor != Array

&& (/function/i).test(fn + "");

};

try{

if(parent && parent.parent){

ifm = parent.parent.document.getElementById(ifmID);

ifm && mh && (ifm.height=mh);

fn=parent.parent[cbn];

isFunction(fn) && fn.call();

ifm=null;

}

}catch(ex){

console.log(ex);

}

</script>

以上就是本文章的内容，希望对大家有所帮助