iframe跨域如何设置高度自适应?

跨域问题是由于javascript语言安全限制中的同源策略造成的。出于安全方面的考虑,不允许跨域调用其他页面的对象。

例如:a域名下,www.a.com/index.html需要引用b域名下,www.b.com/quote.html页面,但引用的这个b域名下页面里面内容高度不确定。此时就需要双方技术共同解决,利用iframe和location.hash方法。

在a域名下,添加一个判断页agent.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域名,quote页面中添加如下代码:

<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 = "http://www.a.com/agent.html"; //设置iframeA的src
          document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
    }
    window.onload=sethash;
</script>

在a域名,index页面中添加如下代码:

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

关于跨域的具体介绍,可以参考:JavaScript跨域总结与解决办法

评论

  1. 8年前
    2016-2-22 13:42:12

    [神马]

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇