zoukankan      html  css  js  c++  java
  • iframe自动适应高度跨域

    回顾下在工作中遇到iframe跨域自动适应高度的解决方法,在网上有找了一个例子http://www.studyofnet.com/news/256.html 这里提供一个Iframe代理的方法,


    简单地说一下原理:

    假设有3个页面,分别是主页面A.html,字页面B.html,代理页面C.html;

    其中A与B是跨域的,而A和C是同域的;

    它们的关系:A包含B,B包含C。

    很显然A和B,以及B和C,因为跨域不能相互通信,而A和C同域,可以相互通信。为此我们就想到让C页面告诉A页面,B页面到底有多少高。因为B和C也是跨域的不能相互通信,所以想在C页面中,直接window.parent.document.body.scrollHeight这样是行不通的,所以我们只能让B页面自己计算自身的高度,然后通过某种方法告诉C页面,再由C页面告诉A页面。这里的一个方法就是在B页面生成一个Iframe节点,然后设置它的src属性,在这个地址上附加一个参数,即B页面计算出来的高度,然后C页面就可以通过window.location获取这个地址栏中的地址,提取出高度值,设置A页面的Iframe的高度。

    基本的原理就是这样,看代码吧:

    //A页面
    <iframe src="被引入的页面B.html" id="Iframe" frameborder="0" scrolling="yes" width="1400"></iframe>

    //B页面脚本
    //计算其实际高度,然后生成一个iframe节点,将高度作为代理页面C的地址的一部分赋值给Src属性
    <iframe id="c_iframe"  height="0" width="0" src="C页面的路径"></iframe>
        <script type="text/javascript">
        (function autoHeight(){
            var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
            var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
            var c_iframe = document.getElementById("c_iframe");
            c_iframe.src= c_iframe.src + '#'+b_width + '|' + b_height;
        })();
    </script>

    //C页面脚本
    //获取请求地址中的高度值,将其赋值给A页面的Iframe的高度
    //新增页面C.html与A.html同域
            <script type="text/javascript">
                var b_iframe = window.parent.parent.document.getElementById("Iframe");
                var hash_url = window.location.hash;
                
                if(hash_url.indexOf("#")>=0){
                    var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
                    var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
                    b_iframe.style.width = hash_width;
                    b_iframe.style.height = hash_height;
                }
        </script>

  • 相关阅读:
    Android权限 uses-permission
    Android中的颜色设置
    px 与 dp, sp换算公式?
    如何成为一名黑客?(转)
    uva 1291(dp)
    框架模式 MVC 在Android中的使用
    CCA概述和安装
    机房收费系统合作版(三)——UI思索
    (36)JS运动之使物体向右运动
    二叉查找树的非递归操作
  • 原文地址:https://www.cnblogs.com/love-is/p/4275822.html
Copyright © 2011-2022 走看看