谷歌、火狐浏览器下实现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. nginx+lua+redis构建高并发应用（转）

    nginx+lua+redis构建高并发应用 ngx_lua将lua嵌入到nginx,让nginx执行lua脚本,高并发,非阻塞的处理各种请求. url请求nginx服务器,然后lua查询redis, ...

  2. OpenJDK 阅读源代码 Java 实现字节流输入类

    Java 的输入输出总是给人一种非常混乱的感觉.要想把这个问题搞清楚.必须对各种与输入输出相关的类之间的关系有所了解. 仅仅有你了解了他们之间的关系.知道设计这个类的目的是什么.才干更从容的使用他们. ...

  3. 从头开始建网站（三）DNS

    前面介绍了站点搭建所须要的两大要素:域名和server,这次要说的是域名解析,也就是把域名和server进行绑定的过程. 我们在訪问网络时,网址会被发送到DNSserver,然后由DNSserver返 ...

  4. 做一个自动修改本机IP和mac的bat文件

    原文:做一个自动修改本机IP和mac的bat文件 1.ip bat修改理论探讨 前两天我突然萌生了一个念头:能不能做一个小程序来实现自动配置或修改IP和mac,达到一键搞定的目的,这样尤其适合那些带着 ...

  5. PHP制作pdf文档方法

    原文:PHP制作pdf文档方法 本篇博客是在看完 php+mysql web书以后自己的测试代码,虽然是测试代码,但不是简单的粘贴复制,为了学习thinkPHP框架,自己就用这个来做的,而且这本书已经 ...

  6. IBatis.net初步使用

    最近加班比较忙,时间也比较琐碎,蛮久没有写东西了.这次就总结一下自己使用IBatis.net的一些总结吧. IBatis简介 IBatis.net是一款开源的Orm框架,应该算是从java的IBati ...

  7. MemoryBarrier，Volatile

    使用MemoryBarrier,Volatile进行同步 上一节介绍了使用信号量进行同步,本节主要介绍一些非阻塞同步的方法.本节主要介绍MemoryBarrier,volatile,Interlock ...

  8. javascript滚动栏响应鼠标滑轮的实现上下滚动事件

    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...

  9. 基于最简单的FFmpeg采样读取内存读写：内存玩家

    ===================================================== 基于最简单的FFmpeg样品系列读写内存列表: 最简单的基于FFmpeg的内存读写的样例:内 ...

  10. fastboot完成自己主动命令

    于Ubuntu13.10后来Ubuntu 14.04上,由APT安装fastboot以及adb该工具后, 发现fastboot在主动补充一个问题,, fastboot flash 自己主动有问题完成后 ...