iframe跨域传输数据
如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
iframe跨域传输数据
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A域中的a.html</title>
</head>
<body>
<script>
function cb(data) {
console.log('成功接收数据 ', data);
}
</script>
<iframe name="proxyIframe" hidden=""></iframe>
<form action="http://b.com/proxy.html?callback=cb&args=data" target="proxyIframe" method="post">
<input type="submit" value="提交">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>B域名的proxy.html</title>
</head>
<body>
<script>
window.onload = function() {
console.log('onload');
console.log(top);
console.log(self);
console.log(top == self)
//如果此页面未被嵌套时返回，不执行
if (top == self) return;
var arr = location.search.substr(1).split('&'),
fn, args;
for (var i = 0, len = arr.length, item; i < len; i++) {
item = arr[i].split('=');
if (item[0] == 'callback') {
fn = item[1];
} else if (item[0] == 'args') {
args = item[1];
}
}
console.log(fn, args);
try {
eval('top.' + fn + '("' + args + '")'); //执行a.html的方法
eval(fn + '("' + args + '")'); //执行当前页面的方法
} catch (e) {
}
function cb(data) {
console.log("执行cb", data);
}
}
</script>
</body>
</html>
- 分类：
- Web前端
更新时间：
上一篇：javascript数组降维下一篇：前端面试题 小明早餐午餐晚餐
相关文章
在iframe中使用富文本编辑器wangEditor
自己做的邮件项目里面需要使用到富文本编辑器，邮件内容说白了就是HTML代码。前任使用的是wangEditor，部分定制化需求就是直接改的源码。 最近发现有的用户的邮件内容加进去的很多css信息， 阅读更多…
回顾下跨域解决方案http-proxy-middleware
我们在React（或Vue）项目本地开发过程中很容易由前端自己解决跨域问题，这里面就用到的是插件 http-proxy-middleware ，它并不是webpack独享的插件，而是一个通用插件，它 阅读更多…
