zoukankan      html  css  js  c++  java
  • 跨域实现IFRAME自适应高度~续(终级)

    IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高
    这需要一个中间页面iframe.html

    原理:通过改变top.location的hash值,来实现高级的自适应
    主页面内容:
    <iframe name="iframeid" id="iframeid" scrolling="no" width="1000" frameborder="0"
                    onload="iframeHeight()"></iframe>
            $("#iframeid").attr({ src: http://local.zzl.com/iframe.aspx?url= + cUrl });

            //自适应高度,不在同一域的对象,是不能相互操作的,只能通过URL地址把子页面的高度传过来
            function iframeHeight() {
                var ifm = document.getElementById("iframeid");
                var hash = window.location.hash.slice(1);
                if (hash && /height=/.test(hash)) {
                    if (ifm != null) {
                        ifm.height = hash.replace("height=", "");
                    }
                }
                setTimeout(iframeHeight, 200);
            }

        </script>

    iframe.html内容(它向主页面通过hash这个瞄点参数向主页面传高度)
    <iframe name="iframeid2" id="iframeid2" scrolling="no" width="1000" frameborder="0"
            src="" onload="iFrameHeight()"></iframe>

        <script type="text/javascript">
            function iFrameHeight() {
                var ifm = document.getElementById("iframeid2");
                var subWeb = document.frames ? document.frames["iframeid2"].document : ifm.contentDocument;
                if (ifm != null && subWeb != null) {
                    ifm.height = subWeb.body.scrollHeight;
                    //  top.location.hash= "#height=" + subWeb.body.scrollHeight; //ie中显示没有权限
                    var hostUrl = document.referrer;
                    hostUrl += "#height=" + subWeb.body.scrollHeight;
                    window.top.location = hostUrl;
                }
            }
        </script>

  • 相关阅读:
    选li第几天数据这种类型
    CSS背景 顶上 顶下之类详解
    php的数据循环 之li的3个类判断
    jq之ajax以及json数据传递
    css响应有media,js响应有这种
    表格高度超出部分滚动条的坑
    【转】IDEA快捷键功能说明及Eclipse对应操作
    【转】intellij idea使用指南—— 导入Eclipse的Web项目
    【转】 关于IDEA javax.servlet.http.HttpServletRequest; 不存在 解决方案
    struts2学习笔记(七)—— struts2的文件上传
  • 原文地址:https://www.cnblogs.com/lori/p/2287092.html
Copyright © 2011-2022 走看看