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

    跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
    方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
    我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

    a.html中包含iframe:

    <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>


    在c.html中加入如下代码:

    <iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></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;  // 这里通过hash传递b.htm的宽高
    })();
    </script>
    

    最后,agent.html中放入一段js

    <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>

    agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度
  • 相关阅读:
    常见数据结构图文详解-C++版
    求单链表中环的起点,原理详解
    Qt Creator 整合 python 解释器教程
    Qt 共享库(动态链接库)和静态链接库的创建及调用
    qt creator 中的"提升为..."功能简介
    QT 操作 excel 教程
    网易2017校园招聘算法题c语言实现源码
    c语言版贪吃蛇小游戏
    mysql语法结构
    Spring MVC rest接收json中文格式数据显示乱码
  • 原文地址:https://www.cnblogs.com/web-leader/p/6187756.html
Copyright © 2011-2022 走看看