跨域实现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>

本文转自博客园张占岭(仓储大叔)的博客,原文链接:跨域实现IFRAME自适应高度~续(终级),如需转载请自行联系原博主。

目录
相关文章
|
6月前
|
移动开发 JavaScript 搜索推荐
iframe常用
iframe常用
|
6月前
|
安全 搜索推荐 JavaScript
什么是iframe
什么是iframe
30 0
|
Web App开发 JavaScript 安全
如何基于 iframe 解决跨域?
一般跨域听得比较多的方案是 Nginx 代理,CORS,而 JSONP 和 iframe 的跨域解决往往只在背八股文的时候出现,而且老是只给 JSONP 的实际操作手段,老是找不着 iframe 的实际操作,所以这篇文章就是介绍如何基于 iframe 解决跨域
|
Web App开发 容器
你对iframe知道多少
你对iframe知道多少
|
JavaScript Java 前端开发
记一次<iframe>的使用
将jsp拆分frame框架,因为采用了第一种方式,一直在考虑用jquery异步请求获取数据,总是但不到效果, 终于在js写吐的时候选择了第二种方式。 //参考网上的使用,大多是下面这个样子,如果涉及静态页面之间定位,是没有问题的//href:为目标页面----->通过target定位到frame ${org.
1099 0
|
JavaScript 前端开发
|
JavaScript 安全 前端开发