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

谷歌、火狐浏览器下实现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不再是难题！,布布扣,bubuko.com

时间： 2024-10-11 13:08:13

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

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

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了吗? No

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

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.这

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

场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的iframe(称为M2页面),它的src与主页面(称为M1页面)同域,当P页面载入完成,计算出此页面的高度,然后创建隐藏iframe(M2页面),设置M2的src属性,将高度附加到M2的url后面,如http://localhost/proxy.html#height=582,代码: 1 (function

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

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了

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

因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles").uploadify({ swf: '/Scripts/uploadify/uploadify.swf', uploader: '/UploadFiles.ashx', queueID: 'fileQueue', buttonText: '附件上传', auto: true, debug: false

火狐浏览器下连接a下无法使用select下拉菜单

火狐浏览器下连接a下无法使用select下拉菜单:如果select下拉菜单包裹在链接a中,则无法实现选中效果,当然如此使用在实际应用中也是很少见的,不过下面还是做一下简单介绍,如何避免此种问题的出现,寄希望能够给需要者带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

火狐浏览器下new Date返回NaN的问题处理，以及日期yyyy-MM-dd格式化功能

// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("

火狐浏览器下,表头边框无效

最近做项目,发现在火狐浏览器下表头边框无效 可能的原因是给th设置了背景颜色 找了半天,原来是给th设置了背景颜色,然后边框被覆盖了,没有显示出来 去掉这行代码就可以显示了 .layui-table-header thead th { background-color: #fff; } 原文地址:https://www.cnblogs.com/ybixian/p/9473452.html

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源策略的限制. 跨域的情形有非常多,最常见的有Ajax跨域.Socket跨域和Canvas跨域.以下列举一些我们常见的跨域情形下.某些浏览器控制台给出的错误提示: FireFox下的提示: 已阻止交叉源请求:同源策略不同意读取***上的远程资源.能够将资源移动到同样的域名上或者启用 CORS 来解决问