在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. ckeditor从word粘贴图片

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  2. 计算机HDMI端口与电视机相连

     造冰箱的大熊猫@cnblogs 2019/2/27 打算通过HDMI接口将计算机桌面投影到电视机上,结果遇到问题,折腾了好一阵才搞定.现将这些问题记录下来 1.设备环境 计算机:使用Ubuntu 1 ...

  3. interp2

    %关于interp2的自我理解 %利用已知的信息,对数据进行拟合 %用一个例子进行理解 例:设有数据x=1,2,3,4,5,6,y=1,2,3,4,在由x,y构成的网格上,数据为:12,10,11,1 ...

  4. Linux可变参数打印日志(二)

    #include<stdio.h> #include<stdlib.h> #include<stdarg.h> #include<string.h> # ...

  5. [CSP-S模拟测试]:Weed(线段树)

    题目描述 $duyege$的电脑上面已经长草了,经过辨认上面有金坷垃的痕迹.为了查出真相,$duyege$准备修好电脑之后再进行一次金坷垃的模拟实验.电脑上面有若干层金坷垃,每次只能在上面撒上一层高度 ...

  6. 系统芯片 SoC

    SoC的定义多种多样,由于其内涵丰富.应用范围广,很难给出准确定义.一般说来, SoC称为系统级芯片,也有称片上系统,意指它是一个产品,是一个有专用目标的集成电路,其中包含完整系统并有嵌入软件的全部内 ...

  7. mysql字符串函数:FIND_IN_SET()使用方法详解

    语法: FIND_IN_SET(str,strlist) 第一个参数str是要查找的字符串. 第二个参数strlist是要搜索的逗号分隔的字符串列表. 假如字符串str 在由N 子链组成的字符串列表s ...

  8. spark streaming 与 storm的对比

    feature    strom (trident) spark streaming 说明 并行框架 基于DAG的任务并行计算引擎(task parallel continuous computati ...

  9. Python将函数放入模块

    函数可以将通用的代码封装起来,便于其他程序或者方法调用.将函数存放在文件中,这个文件被称为模块.将函数存储在独立的模块中,可与其他程序员共享这些文件而不是整个程序. fun.py def say_hi ...

  10. 6.HBase时髦谨慎财会会计

    1.基本概念和原理 2.核心知识点 3.安装部署 4.Hbase开发