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>

  • 相关阅读:
    【leetcode】1295. Find Numbers with Even Number of Digits
    【leetcode】427. Construct Quad Tree
    【leetcode】1240. Tiling a Rectangle with the Fewest Squares
    【leetcode】1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold
    【leetcode】1291. Sequential Digits
    【leetcode】1290. Convert Binary Number in a Linked List to Integer
    【leetcode】1269. Number of Ways to Stay in the Same Place After Some Steps
    【leetcode】1289. Minimum Falling Path Sum II
    【leetcode】1288. Remove Covered Intervals
    【leetcode】1287. Element Appearing More Than 25% In Sorted Array
  • 原文地址:https://www.cnblogs.com/love-is/p/4275822.html
Copyright © 2011-2022 走看看