博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跨域实现IFRAME自适应高度~续(终级)
阅读量:6261 次
发布时间:2019-06-22

本文共 1281 字,大约阅读时间需要 4 分钟。

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高

这需要一个中间页面iframe.html

原理:通过改变top.location的hash值,来实现高级的自适应

主页面内容:
<iframe name="iframeid" id="iframeid" scrolling="no" width="1000" frameborder="0"
                οnlοad="iframeHeight()"></iframe>
        $("#iframeid").attr({ src: + 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="" οnlοad="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>

转载于:https://www.cnblogs.com/lori/archive/2011/12/14/2287092.html

你可能感兴趣的文章
如何根据protobuf来Mock后台返回的数据
查看>>
JavaScript 运算符规则与隐式类型转换详解
查看>>
网站攻击中的csrf和xss
查看>>
(CZ深入浅出Java基础)反射
查看>>
图像颜色提取
查看>>
20170626-Promise的实现
查看>>
jQuery webcam plugin调用摄像头
查看>>
Vue入门笔记
查看>>
bash脚本case与函数
查看>>
我的学习计划
查看>>
理解 Go 语言中的方法和接收者
查看>>
iView 发布 2.0.0-rc.16 版本
查看>>
React表单组件
查看>>
从0到1学习node(八)之异步控制工具async
查看>>
Android 运行时权限库
查看>>
网易漫画Swift混编实践
查看>>
如何针对业务设计架构?——QCon热点专题前瞻
查看>>
你的可用性达标了吗?云端业务性能高可用的深度实践
查看>>
Mozilla开发全新的公开网络API WebXR 来实现增强现实
查看>>
用户超5亿,三年投10亿,开发者如何抢滩支付宝小程序蓝海?
查看>>