谷歌、火狐浏览器下实现JS跨域iframe高度自适应的解决方法

导读：今天开发的时候遇到个iframe自适应高度的问题，相信大家对这个不陌生，但是一般我们都是在同一个项目使用iframe嵌套页面，这个ifame高度自适应网上一搜一大把，今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果：例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢？ 这个时候在谷歌下肯定是拿不到 iframe里面的 docment元素的

解决方法：

新建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>crossdomain | postMessage + window.name</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body, button{
        font-family: Verdana, Arial;
        color: #333;
    }
    h1{
        text-align:center;
        font-size:24px;
    }
    .wrapper{
        padding:10px;
        width:640px;
    }
    .wrapper, #child{
        border:#A11111 2px solid;
    }
    #info{
        color:#00F;
        height:30px;
        overflow-y:auto;
    }
    </style>
    <script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/util.js'></script>
    <script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/xd.js'></script>
</head>
<body>
    <h1>CrossDomain using (postMessage + window.name)</h1>
    <div class='wrapper'>
        <p>Host window, <strong>woiweb.net</strong></p>
        <input type="text" value="500px" id="val" />
        <button id='trigger'>Send Message</button>
        <p id='info'></p>
        <iframe width='600' height='140' scrolling='auto' frameborder='0'
        id='child' src='http://crossdomain.sinaapp.com/xd/iframe.html'></iframe>
    </div>
    <script type='text/javascript' >
        var send = function() {
            var val = $E('val').value;
                val = val || '500px';
                 
            var json = {
                'height' : val
            };
             
            XD.sendMessage($E('child').contentWindow, json);
        };
        var callback = function(data) {
            $E('info').innerHTML = jsonToStr(data);
            $E('child').style.height = data.height;
        };
         
        XD.receiveMessage(callback);
        addEvent($E('trigger'), 'click', send);
    </script>
</body>
</html>

在建一个iframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>crossdomain | postMessage + window.name</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    html{
        font-family: Verdana, Arial;
        color: #333;
        background:#EEE;
    }
    #info{
        color:#00F;
        height:30px;
        overflow-y:auto;
    }
    #box{
        width:100px;
        height:100px;
        border:#A11111 2px solid;
    }
    </style>
    <script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/util.js'></script>
    <script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/xd.js'></script>
</head>
<body>
    <p>Iframe window, <strong>crossdomain.sinaapp.com</strong></p>
    <input type="text" value="500px" id="val" />
    <button id='trigger'>Send Message</button>
    <p id='info'></p>
     
    <script type='text/javascript' >
        var send = function() {
            var val = $E('val').value;
                val = val || '500px';
                 
            var json = {
                'height' : val
            };
            XD.sendMessage(parent, json);  //区别在这里，第一个参数
        };
        var callback = function(data) {
            //演示改变
            $E('info').innerHTML = jsonToStr(data);
            document.body.style.height = data.height;
        }
        XD.receiveMessage(callback);
        addEvent($E('trigger'), 'click', send);
    </script>
</body>
</html>

兼容任何的浏览器。跨域调用JS不再是难题！

demo下载

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！的更多相关文章

  1. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  2. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  3. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  4. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  5. [转载]跨域iframe高度自适应

    场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...

  6. 对Fiddler设置【Decrypt HTTPS traffic】后火狐浏览器打开https【您的连接并不安全】的解决方法

    火狐浏览器在打开https页面的时候出现[您的连接并不安全]的提示页面: 在设置Fiddler的HTTPS解密的时候,会对下面图中的红线框的选项点击一次生成一个Fiddler 根证书在桌面上: 点击火 ...

  7. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  8. 解决文件上传插件Uploadify在火狐浏览器下，Session丢失的问题

    因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles&qu ...

  9. laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题

    遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input ...

随机推荐

  1. 返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性

    原文:返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性 [索引页][源码下载] 返璞归真 asp.net mvc (12) - asp.net mvc ...

  2. telnet发电子邮件

    无聊今天的工作,想想一个学生被提到最后一次telnet发电子邮件,所以我想试试.最后,成功的实践,这里做个总结. 首先,cmd进telnet打开回话: 下面红色字体为命令. 1.open smtp.1 ...

  3. shell 脚本运算符

    1.数值 格式: test "num1" opr "num2" [ "num1" opr "num2" ] opr 取值 ...

  4. 惠普4431s 笔记本配置

    hp-4431s驱动精灵硬件检测报告 版本:2015.3.26.1363(8.1.326.1363)================================================== ...

  5. CocoStudio学习资源

    CocoStudio安装包及实例project:http://www.cocoachina.com/bbs/read.php?tid=154886 CocoStudio视频教程系列:http://mo ...

  6. UVA11396-Claw Decomposition(二分图判定)

    题目链接 题意:能否将一张无向连通图分解成多个爪型.每一条边仅仅能属于一个爪型,每一个点的度数为3. 思路:当图分解成类干个爪型时,每条边仅仅属于一个爪子,所以每条边的两个点一定要处于2个不同的鸡爪中 ...

  7. POJ 2828 Buy Tickets（排队问题，线段树应用）

    POJ 2828 Buy Tickets(排队问题,线段树应用) ACM 题目地址:POJ 2828 Buy Tickets 题意:  排队买票时候插队.  给出一些数对,分别代表某个人的想要插入的位 ...

  8. 编程算法 - 数字数组中只出现一次 代码(C)

    数字数组中只出现一次 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 一个整型数组里除了两个数字以外, 其它的数字都出现了两次. 请敲代码找出这 ...

  9. LayoutDemo

    package swing.ui; import java.awt.BorderLayout; import java.awt.GridLayout; import javax.swing.JButt ...

  10. SQL Server高可用——日志传送（4-1）——概论

    原文:SQL Server高可用--日志传送(4-1)--概论 本文作为学习总结,部分内容出自联机丛书及其他书籍 日志传送是什么? SQLServer 2012之前(2012出现了AlwaysOn), ...