谷歌、火狐浏览器下实现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. C#托付和事件

    C#托付.我看了非常长时间的资料和帖子, 曾经对托付的理解就是托付事实上就是将一个方法作为參数传递给第一个方法. 如今对托付的认识则变了一些的,托付能够实现: 1.在两个不能直接调用的方法之间做为桥梁 ...

  2. HDU 3831 DICS

    意甲冠军: 按标题给4操作模式  用最少的次数  离a串行转换b弦 思路: 因为操作仅仅有这4种  所以我们能够确定从头到位去匹配a和b一定是正确的 那么状态数一共同拥有多少呢  一共同拥有lengt ...

  3. 如何更好地理解和使用Github

    只知道几乎在顶部看到一对Github用通俗易懂的解释: 你或许不懂怎样造一辆凯迪拉克,但你能够驾驶凯迪拉克. 你或许不懂Evernote是用什么技术做出来的,但你也能够使用Evernote. 你或许不 ...

  4. android代码集EditText只要输入号码、信

     如何设置EditText,因此,只有某些数字或字母可以进入它? 一.建立EditText,只要输入号码: 办法1:直接生成DigitsKeyListener了. et_1.setKeyListe ...

  5. 简单介绍如何使用PowerMock和Mockito来mock 1. 构造函数 2. 静态函数 3. 枚举实现的单例 4. 选择参数值做为函数的返回值(转)

    本文将简单介绍如何使用PowerMock和Mockito来mock1. 构造函数2. 静态函数3. 枚举实现的单例4. 选择参数值做为函数的返回值5. 在调用mock出来的方法中,改变方法参数的值 一 ...

  6. c语言实现hashtable，相似C++的map和iOS的NSDictionary

    跟线性数组和链表不同.HashTable是高速查找的数据结构.本文中的HashTable使用链表处理数组. 该HashTable能够指定table的长度.提供了遍历的方法. 包含table的长度的选择 ...

  7. 网页显示UIWebView（一个）

    1.scalesPageToFit设置为YES,这样web页面会依据屏幕大小进行自己主动缩放. 2.UIWebView的状态监视 //内容读入開始前被调用.将UIWebView,返回no后UIWebV ...

  8. 使用智能移动设备访问Ossim制

    使用智能移动设备访问Ossim制 下面我们用iPad,iPhone通路ossim效果系统. 高清视频:http://www.tudou.com/programs/view/TikMZ1z1ELw ip ...

  9. 将node-expat扩展编译至node.exe中

    1.下载node源代码 https://github.com/joyent/node (v:0.10.25) 2.下载node-expat源代码 https://github.com/node-xmp ...

  10. 杭电1233还是畅通project

    还是畅通project Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...