js跨域传值,兼容ie8以上

事先说明,此方法并不支持ie8,如果想要支持ie8的话,需要用这种思路(来自微软):

if (window.addEventListener) {

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

    if (e.domain == 'example.com') {

      if (e.data == 'Hello World') {

        e.source.postMessage('Hello');

      } else {

        console.log(e.data);

      }

    }

  });

}

else { // IE8 or earlier

  window.attachEvent('onmessage', function (e) {

    if (e.domain == 'example.com') {

      if (e.data == 'Hello World') {

        e.source.postMessage('Hello');

      } else {

        alert(e.data);

      }

    }

  });

}

这里为了保持代码简洁,就不详细介绍了,有需要的可以在下方留言我会解答的

不写是因为网上好多例子都没有几个能解决跨域问题的,更多的还都是复制粘贴吸引人气的那些人,更可气

我们要实现的目的是:父页面的文本框每次改变,都会将内容发送到子页面由子页面处理:

我们这里的处理方式是在控制台打印出来

好啦先上代码:

  • 新建2个html,a.html和b.html
  • 我是为了省事将a.html放到了webStorm下,而b.html放到了我的IDEA项目中

a.html

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

          name="viewport">

    <meta content="ie=edge" http-equiv="X-UA-Compatible">

    <title>父页面</title>

</head>

<body>

<label for="test">父页面的文本框

    <input id="test"  onpropertychange="sendMsg()" oninput="sendMsg()" type="text">

</label>

<br>

<hr>

<iframe id="child" src="http://localhost/a"></iframe>

<script type="text/javascript">

    <!--将文字发送到子页面-->

    function sendMsg() {

        var test = document.getElementById("test");

        console.log("父页面给子页面发送了" + test.value);

        window.frames[0].postMessage(test.value, "http://localhost");

    }

</script>

</body>

</html>

b.html

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

          name="viewport">

    <meta content="ie=edge" http-equiv="X-UA-Compatible">

    <title>子页面</title>

</head>

<body>

这里是子页面内容

其实子页面几乎什么也没有

<script type="text/javascript">

    window.onmessage = function (event) {

        console.log("子页面收到了" + event.data)

    };

</script>

</body>

</html>

如图所示:

这里使用的是127.0.0.1和localhost做的测试,属于跨域,正常情况下是无法传值的

尝试在父页面的文本框中输入一些东西看一下

这样我们就可以正常传值了,随后根据需求进行处理就可以了

附上ie下测试效果:

相关介绍:

  • onpropertychange事件是为了兼容一下ie11以下版本,如果不需要兼容,可以去掉
  • 建议使用addEventListener方法来正式使用,好出嘛,就是你同时添加两个oninput事件使用这种方法不会冲突,否则只能同时响应一个方法
  • 其他的还不知道,如果有需要可以在评论区留言

js跨域传值,兼容ie8以上的更多相关文章

  1. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  4. 跨域的小小总结：js跨域及跨域的几种解决方法

    一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...

  5. 解决js跨域

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  7. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  8. window.opener方法的使用 js跨域

    原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...

  9. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

随机推荐

  1. springmvc简单集成shiro

    前言: 有天和同事聊天, 谈起权限管理, 他说他有个同事用shiro用的很溜. 正好现在有个管理平台项目, 有权限控制的需求, 因此想借此机会研究一番. 本文主要简单讲解一下对shiro的一些认识, ...

  2. 桥接模式-pattern系列

    git链接 桥接模式 桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化. ...

  3. 长度不超过n的连续最大和___优先队列

    题目链接: https://nanti.jisuanke.com/t/36116 题目: 在蒜厂年会上有一个抽奖,在一个环形的桌子上,有 nn 个纸团,每个纸团上写一个数字,表示你可以获得多少蒜币.但 ...

  4. s21day09 python笔记

    s21day09 python笔记 一.三元运算(三目运算) 用途:用于简单的if条件语句 基本结构 v = 前面 if 条件 else 后面 #如果条件为真,v = 前面,否则,v = 后面 &qu ...

  5. JAVA第八次作业

    JAVA第八次作业 (一)学习总结 1.用思维导图对本周的学习内容进行总结 参考资料: XMind. 2.通过实验内容中的具体实例说明在执行executeUpdate()方法和executeQuery ...

  6. Self-Introduce

    My name is Leo.I like listening music, especially English song.What's more, I enjoy playing games, l ...

  7. ： LDAP & Implementation

    LDAP LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以根据需要 ...

  8. java服务端的 极光推送

    项目中用到了极光推送  下面写下笔记 首先引入jar包   下载地址https://docs.jiguang.cn/jpush/resources/(非maven项目的下载地址) <depend ...

  9. ab压力测试nginx

    centos7系统: yum install httpd-tools -y #安装ab压力测试工具

  10. java_lambda表达式

    lambda表达式1    由来    概念        是通过策略模式来曲线实现的    lambda表达式2    语法详解    lambda表达式3    目标类型的概念    目标类型推断 ...