跨域使用onmessage实现方式
2024-10-01 17:56:45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://www.layoutit.cn/css/all.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script>
function text(){
var id = document.getElementById("frame");
var win = id.contentWindow;
var mess = '{"name":"zhujiasheng","sex":1,"age":32}';
win.postMessage(mess,"*")
}
</script>
<div onclick="text()">b页面发送消息</div>
<iframe src="b.html" id="frame" ></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b页面</title>
<style>
*{margin:0;padding:0;}
.dom{width:200px;height:200px;border:1px solid #ccc;margin:0 auto;}
</style>
</head>
<body>
<div class="dom">
</div>
<script>
window.onmessage = function(e){
e = e || event;
var data = JSON.parse(e.data);
console.log(data);
var dom = document.getElementsByClassName("dom")[0];
var str = "";
for(var i in data){
str +="<span style='color:#f00;'>"+data[i]+"</sapn><br/>";
}
dom.innerHTML = str;
}
</script>
</body>
</html>
最新文章
- php变量 写时改变 写时复制
- UVa 1328 Period
- HP 7440老机器重启
- LightOJ1119 Pimp My Ride（状压DP）
- 一个伪ajax图片上传代码的例子
- Python3 学习第十一弹： 模块学习四之sys库
- Android进阶笔记08：Android 中Activity、Window和View之间的关系
- 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap
- MVC4.0系统开发新手历程（四）数据列表查询
- BOM 窗体相关属性以及页面可见区域的获取方式
- 京东的SSO
- UVa 908 - Re-connecting Computer Sites
- Review: Basic Knowledge about SQL
- DOTween坑点
- CF1105E Helping Hiasat 最大团
- 简单说throw和throws的区别
- html框内文字垂直居中的方法
- css优化建议
- kbmMW功能 - kbmMWProcess单元（转帖）
- 剑指offer题目系列二