`
xhgrid
  • 浏览: 13769 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

iFrame 跨域高度自适应问题解决

JavaScript 
阅读更多
需求是：A页面(例如：www.taobao.com) 要嵌入B(例如： www.alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。

具体代码：

iframe主页面 A.html
  <div>

     <iframe id="aFrame" scrolling='no' border=0 frameborder=0 width=100% height="400px" class="failure"

src="www.alibaba.com/B.html" runat="server"></iframe>

</div> 



cross.js --cross放到父页面的域名下
复制代码
var inner = inner || {};
var getUrlValue = function (url) {
    var url = (url !== undefined) ? url : window.location.href;
    if (url.indexOf("#") > -1) {
        var variable = url.split("#")[1];
    } else {
        var variable = url.split("?")[1];
    }
    if (variable === undefined) {
        return {};
    } else {
        var value = {};
        variable = variable.split("&");
        for (var i = 0, m = variable.length; i < m; i++) {
            value[variable[i].split("=")[0]] = variable[i].split("=")[1]; }
            return value;
    }
}
var mathor_url = getUrlValue()['mathor_url'];
if (!mathor_url) {
    if (/alibaba.com/.test(window.location.href.match(/[^htps\/]*[^\/]+/g)[1])) {---------判断是否是阿里巴巴的域名
        mathor_url = "www.taobao.com.cn/qiantao"; --------------要修改的A页面服务器地址（此地址是proxy放置地址的前段部分）
    }else{
        mathor_url="
www.taobao.com.cn/qiantao
";------------
要修改的A页面服务器地址
(可以是测试地址,或者是如果正式测试的都一样，则else可不要)
    }
}
inner = {
    iframe_el: null,
    url: 'http://' + mathor_url,
    aid: 1,
    href: null,
    time: null,
    signA: false,
    autoHeight: true,
    getDocHeight: function () {
        var height = (navigator.appName == "Microsoft Internet Explorer") ? document.body.scrollHeight + 20 : document.body.offsetHeight + 20;
        return height;
    },
    postAction: function (u) {
        var fd = this; clearInterval(this.time);
        fd.iframe_el_new = document.createElement('iframe');
        fd.iframe_el_new.height = 0;
        fd.iframe_el_new.style.height = '0px';
        fd.iframe_el_new.style.width = '0px';
        fd.iframe_el_new.style.border = 'none';
        fd.iframe_el_new.width = 0;
        fd.iframe_el_new.frameborder = 0;
        fd.iframe_el_new.border = 0;
        fd.iframe_el_new.scrolling = 'no';
        fd.iframe_el_new.src = fd.url + "/proxy.htm#aid=" + this.aid + "&" + u;
        fd.iframe_el.parentNode.appendChild(fd.iframe_el_new);
        fd.iframe_el.parentNode.removeChild(fd.iframe_el);
        fd.iframe_el = fd.iframe_el_new;
        this.aid++;
    },
    setHeight: function (height) {
        if (height === undefined) {
            height = this.getDocHeight();
        }
        this.postAction("action=setheight&height=" + height);
    },
    start: function () {
        var fd = this;
        fd.iframe_el = document.getElementById("aFrame"); -----更改ifram的名称
        if (this.autoHeight) {
            fd.old_height = 0;
            var autoHeight = function () {
                if (fd.old_height != inner.getDocHeight()) {
                    fd.old_height = inner.getDocHeight();
                    fd.setHeight();
                }
            }
            setInterval(autoHeight, 200);
        }
    }
};

document.write('<iframe id="aFrame" style="width:0; height:0; border:none;" frameborder="0" scrolling="no" src="' + inner.url + '/proxy.htm#aid=0&action=setheight&height=' + inner.getDocHeight() + '"></iframe>');-----此处也要进行修改，拼接proxy.htm的位置，注意proxy.htm存放的位置
inner.start();
(function () {if (!!window.ActiveXObject && !window.XMLHttpRequest) {
        var links = document.getElementsByTagName('a');
        for (i = links.length - 1; i >= 0; i--) {
            var clink = links[i];
            if (clink.target == "_top") {
                clink.onclick = (function () {
                    var chref = clink.href;
                    return function () {
                        if (window.top) {
                            window.top.location = chref;
                        }
                    }
                })()
            }
        }
    }

})() 
复制代码


proxy.htm （代理页） --代理页面放到父页面的域名下
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
    var old_aid = null;
    var action = function () {
        try {
            if (window.location.href.indexOf("#") == -1) return;
            var aid = window.location.href.match(/(#|&)aid=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
            var height = window.location.href.match(/(#|&)height=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
            if (aid == null) return;
            old_aid = aid;
            if (-[1, ]) {
                height = parseInt(height) + 20;
            }
            window.parent.parent.document.getElementById("aFrame").style.height = height + "px";
        } catch (e) { }
    };
    action();
</script>
</body>
</html>
复制代码



最后将自适应的页面www.alibaba.com/B.html中添加引用cross.js脚本(放到</body>之前)


http://www.cnblogs.com/liushanshan/archive/2011/05/19/2051094.html
分享到：
| Self-updating scripts
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。

    iframe跨域嵌套自适应高度

    iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)

    iframe跨域自适应高度模板

    iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板

    iframe跨域高度自适应例子源码

    有个在线例子，访问地址：http://okiner.cn/demo/cross-domain/iframe.html，这是源码，方便下载

    解决iframe跨域高度自适应问题的源码

    有个在线例子，访问地址：http://okiner.cn/demo/cross-domain/iframe.html，这是源码，方便下载

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    iframe跨域常用问题和iframe页面自适应

    这是关于iframe使用过程中出现的问题整理的解决方法，关于使用iframe不用单独写接口打通数据，直接把数据通过ifarme嵌套方法传递过去，使用简单方便。

    IFrame跨域高度自适应实现代码

    最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法

    iframe 跨域 自动适应高度

    iframe 跨域 自动适应高度；iframe 跨域 自动适应高度；

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    利用location.hash实现跨域iframe自适应

    页面域关系： 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.

    js跨域问题之跨域iframe自适应大小实现代码

    前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。

    Iframe 高度自适应（兼容IE/Firefox、同域/跨域）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器，控制id为...

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题

    iframe自适应高度.rar

    介绍： 填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。

    iframe-resizer-master.rar

    iframe-resizer-master解决iframe高度自适应问题，跨域问题 iframe-resizer-master解决iframe高度自适应问题，跨域问题

    JavaScript 处理Iframe自适应高度(同或不同域名下)

    Iframe自适应高度一直都备受关注，接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应，感兴趣的朋友可以参考下哈

    iframe窗口高度自适应的实现方法

    无法进行跨域操作，使得问题比较棘手参考了一下网上的做法，引入了一个代理页面，或者叫做中介 agent.html，属于domainA然后，在domainB 中的other.html中，再使用iframe将agent.html进行嵌套 好了，现在情况是这样...

Magicbox
Global site tag (gtag.js) - Google Analytics