谷歌、火狐浏览器下实现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. Android -- Looper.prepare()和Looper.loop() —深度版

    Android中的Looper类,是用来封装消息循环和消息队列的一个类,用于在android线程中进行消息处理.handler事实上能够看做是一个工具类.用来向消息队列中插入消息的. (1) Loop ...

  2. Java基金会——JUnit

    JUnit 測试的重要性毋庸质疑.但怎样使測试更加准确和全面.而且独立于项目之外而且避免硬编码,JUnit给了我们一个非常好的解决方式. 能够说JUnit是为单元測试而生的,一个Java语言的单元測试 ...

  3. virus.win32.parite.H查杀病毒的方法

    virus.win32.parite.H病毒的查杀方法 昨天电脑中了virus.win32.parite.H病毒,搞了2个多小时最终搞定了.以下记录下我的解决方法. 第一步:下载Win32.Parit ...

  4. URAL 1553. Caves and Tunnels 树链拆分

    一颗树 每次出发点右键值是0 2操作模式1.第一i右键点值添加x 2.乞讨u至v在这条路上右上方值 树为主的连锁分裂称号 #include <cstdio> #include <cs ...

  5. node.js基础：模块的创建和引入

    模块可能是一个文件,也可能是包含一个或多个文件的目录.如果模块是个目录,node.js通常会在这个目录下找一个叫index.js的文件作为模块的入口. 典型的模块是一个包含exports对象属性定义的 ...

  6. PHP第七课 使用方法数组2

    学习平台: 1.了解数组函数 2.输出随机验证码 1.数组函数: 数组函数: //作用:提供了非常多官方写的非常实用的代码段,提高编写速度. 1.数组的键值操作函数 2.统计数组的元素和唯一性 3.使 ...

  7. Bug记录：微博的Java SDK返回经纬度错误

    现象:美国的坐标点可能会定位到西藏地区-后发现原来负经度经解析后,均变成正的! 源码: private void getGeoInfo(String geo) { StringBuffer value ...

  8. Linux之父：除了写内核代码 别的真不会（转）

    Linus Torvalds 是 Linux 之父,被誉为活着的传奇. 其实很多人不了解他也并不奇怪,因为人是在是太低调了.现年 46 岁的他每天的工作仍然是编程,领导并推动着 Linux 的发展. ...

  9. Android应用开发：LoaderManager在Activity/Fragment中的使用分析

    LoaderManager 外部接口initLoader:起始 public <D> Loader<D> initLoader(int id, Bundle args, Loa ...

  10. 设备MyEclipse6.5的maven

    设备MyEclipse6.5的maven A.首先删除MyEclipse6.5自带的maven 删除步骤: 1.关闭MyEclipse,进入MyEclipse6.5安装目录,搜索maven,将搜索结果 ...