完美实现跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

完美实现跨域iframe高度自适应(兼容IE/FF/OP/Chrome)代码。在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过location.hash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一些非常有意义的事情。)。由于A和main页面同域,所以可以修改main的dom节点属性,从而达到我们设置iframe标签高度的目的。

关键代码:

iframe主页面:main.html

<iframe id="iframeB"  name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>

iframe嵌套页面:B.html

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>

<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight; //获取自身高度
    urlC = "www.a.com/A.html"; //设置iframeA的src
    document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>

中介页面:A.html

<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
    iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
    iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。

资料来源:http://cued.xunlei.com/log019

利用JS加载iframe(框架)的方法

利用JS加载iframe(框架)的方法,首先,在<body>开始处调用JS脚本,形式如下:

<script src=”/js/js.js”></script>

而这个js脚本的具体内容则是指向调用商品的窗体内页,内容如下:

document.write(‘<Iframe src=”/iframe/sp.html” width=”100%” height=”3000px” scrolling=”no” frameborder=”0″></Iframe>’);

sp.html中的内容就是推广商品的内容了,这样的方法既可以取得很好的SEO效果同时也可以在每篇文章前加上大量的商品链接了。至于这种利用JS加载iframe(框架)的方法有什么作用,那还是大家自己去想了。

跨域修改iframe(框架)中的文字内容

跨域修改iframe(框架)中的文字内容。有的时候我们需要在自己网站上利用iframe(框架)功能框住外部网站一个页面,而且出于某种目的,有时还想把被框架的网页替换掉部分文字,这就需要解决iframe(框架)跨域问题了,在网上找的一段代码,收集备忘。

首先需要修改iframe加载方式

<iframe frameborder="0" scrolling="no" src="replace.php?http://wiki.maxthon.com/maxthon/" width="500" height="250"></iframe>

然后再利用一段JS来替换内容

<script type="text/javascript">
document.getElementsByTagName("iframe")[0].src="replace.php?"+document.getElementsByTagName("iframe")[0].src;
</script>

replace.php文件的写法

<?php
$site=$_SERVER[‘QUERY_STRING’];
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $site);
$content  = curl_exec ($ch);
curl_close ($ch);
$content=str_replace("browser","崔凯到此一游",$content);
//将iframe对方页面的browser替换为崔凯到此一游
echo $content;
exit;

?>

其中的str_replace函数甚至可以批量替换内容

$replacements = array(
    "原词1" => "替换词1",
    ‘原词2’ => ‘替换词2’,
    ‘原词3’ => ‘替换词3’
);
$content=str_replace(array_keys($replacements), $replacements, $content);

资料来源:http://uicss.cn/cross-domain/