解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）
在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）的更多相关文章
- HTML5中window.postMessage，在两个页面之间的数据传递
HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...
- Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- 利用html5 postMessage接口跨域设置iframe大小
<!doctype html> <html> <head> <title>Document A</title> <meta chars ...
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- window.postMessage()实现跨域消息传递
window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...
- 使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
- [转载]跨域iframe高度自适应
场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...
随机推荐
- Hibernate 5 Maven 仓库的 Artifacts
Hibernate artifacts 官方发布的仓库在 JBoss Maven repository 中.Hibernate 发布的 artifacts 也会同时同步到 Maven Central ...
- Confluence 6.15 博客页面（Blog Posts）宏
博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中: 从编辑工具栏中,选择 插入(Insert) ...
- HDU - 3586 Information Disturbing 树形dp二分答案
HDU - 3586 Information Disturbing 题目大意:从敌人司令部(1号节点)到前线(叶子节点)的通信路径是一个树形结构,切断每条边的联系都需要花费w权值,现在需要你切断前线和 ...
- centos后台运行python程序
在服务器上,为了退出终端,程序依然能够运行,需要设置程序在后台运行. 关键的命令:nohup *基本用法:进入要运行的py文件目录前 nohup python -u test.py > tes ...
- jmeter操作登录等简单的使用
一.登录 1.打开jmeter创建“线程组” 2.创建HTTP默认值 3.添加http默认值后,后边的http请求就可以省略填写部分内容 4.添加“HTTP信息管理头”在内添加名称:“Content- ...
- HDU 5858 Hard problem ——（计算几何）
其实这题最多是个小学奥数题- -,,看到别人博客各显神通,也有用微积分做的(我也试了一下,结果到最后不会积...). 思路如下(这两张图是网上找来的): 然后就很简单了,算三角形面积可以用海伦公式,也 ...
- JvmOverloads kotlin(14)（转）
在Kotlin中@JvmOverloads注解的作用就是:在有默认参数值的方法中使用@JvmOverloads注解,则Kotlin就会暴露多个重载方法.可能还是云里雾里,直接上代码,代码解释一切:如果 ...
- js如何获取鼠标位置
获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...
- Python学习笔记—Dict和set
dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...
- SprintBoot日志
yml配置 #logging logging.file: "logs/app.log" logging: level: root: debug file: max-size: 10 ...