在iframe跨域引用高度自适应这块写的js方式都试了不管用，最终使用的是window.postMessage() 跨域获取高度 传递信息

1.首先，在主页面上使用iframe引入子页面：也就是A.html页面引入B.html页面，下面看看A.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        <style>

        *{

            padding: 0;

            margin: 0;

        }

    </style>

    <body>

        <div>Hello! Is A.Html</div>

        <div align=center>

            <iframe Id="frame_child" width="100%"></iframe>

        </div>

    </body>

</html>

<script>

    $(function() {

        window.onload = function() {

            var url = "http://liting397.cn/";     //要访问子类调用地址

            $("#frame_child").attr("src", url);

            $("#frame_child").load(function() {

                setTimeout(function() {

                    var frame = document.getElementById("frame_child").contentWindow;

                    var message = {

                        parentOrigin: window.origin,

                        msg: "收到请回复"

                    };

                    frame.postMessage(JSON.stringify(message), url);

                    console.log('发送成功');

                }, 2000);

                window.addEventListener("message", receiveMessage, false);

            });

        }

        var receiveMessage = function(event) {

            //if (event.origin !== event.data.Domain)

            //     return;

            console.log("子页面有消息来了");

            $("#frame_child").attr("height", event.data + 'px');

            window.removeEventListener("message", receiveMessage, false);

        }

    })

</script>

2.子页面代码块js下边是B.html页面,B.html页面

<script>

    //本ifram为自适应js  使用postMessage  像父类传递消息

    $(function() {

        window.addEventListener('message', function(event) {

            const data = JSON.parse(event.data)

            if (event.origin !== data.parentOrigin) {

                return

            }

            event.source.postMessage(document.body.scrollHeight, event.origin);

        }, false);

    });

</script>

这里是写好的ifram引用地址 可以参考  http://liting400.cn/

解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）的更多相关文章

  1. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

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

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

  3. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  4. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  5. 利用html5 postMessage接口跨域设置iframe大小

    <!doctype html> <html> <head> <title>Document A</title> <meta chars ...

  6. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  7. window.postMessage()实现跨域消息传递

    window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...

  8. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

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

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

随机推荐

  1. 【Python之路】特别篇--ECMA对象、DOM对象、BOM对象

    ECMA对象 从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词. ECMAScript 定义了“对象定义”,逻辑上等价 ...

  2. 灰度图像--图像增强 双边滤波 Bilateral Filtering

    学习DIP第31天 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些论坛转载后,图像无法正常显示,无法正常表达本人观点,对此表示很不 ...

  3. js输入密文弹出数字键盘

    我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2. ...

  4. python3网络编程

    网络编程(定义) 网络编程的本质就是两个设备之间的数据交换,当然,在计算机网络中,设备主要指计算机,数据传递本身 没有多大难度,不就是把一个设备中的数据发送给一个设备,然后接收另一个设备的反馈的数据. ...

  5. webservice代码编写主要包括服务器端发布和客户端调用。

    一.java工程发布,java工程调用   (一).服务器端的编写 1.在eclipse里新建java project工程,创建功能类,通过关键字@webservice(name="newI ...

  6. 20165207 Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 一.实验内容 1. 查询基本信息 1.1. 使用whois.nslookup.dig命令查询DNS和ip信息 使用whois查询某个我经常用的学习网站的域名(去掉了前缀的 ...

  7. 软工第04组 Alpha冲刺（1/6）

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 过去一段时间对项目的精度和分工进行了更加细致的划分,并初步进行了GamePlay逻辑部分的框架设计 GitHub签入记录: ...

  8. 设置Chart.js默认显示Point点的值不用鼠标经过才显示

    Chart.js默认的显示方式是鼠标经过Point点的时候才会显示这个点的值,代码如下: var testdata: { periodNum: ["2018121","2 ...

  9. LC 789. Escape The Ghosts

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...

  10. LC 851. Loud and Rich

    In a group of N people (labelled 0, 1, 2, ..., N-1), each person has different amounts of money, and ...