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. springBoot的数据库操作

    一:操作数据库起步 1.Spring-Data-Jpa JPA定义了对象持久化的标准. 目前实现了有Hibernate,TopLink 2.pom添加依赖 <dependency> < ...

  2. SQLserver触发器实现A表insert到B表

    CREATE TABLE tab1(tab1_id varchar(11));CREATE TABLE tab2(tab2_id varchar(11)); 现在我们有两张表,要实现在A表里面inse ...

  3. ES6 用Promise对象实现的 Ajax 操作

    下面是一个用Promise对象实现的 Ajax 操作的例子. const getJSON = function(url) { const promise = new Promise(function( ...

  4. 关于使用JPA中@Query注解传递表名/视图名参数的问题

    因碰到需要动态查询不同视图的结果,自己尝试使用@Query注解中传递视图名称参数: @Query("select * from ?1") List<Object> ge ...

  5. window.location.href webkit不兼容

    window.event.returnValue=false; 在location.href后加上后修复 来自为知笔记(Wiz)

  6. 关于Jordan标准形

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/25 设$A$是$n$维线性空间$V$上的线性变换,它的特征值与相应的代数重数分别为$\lambda_i ...

  7. Chromium Settings页面修改

    /********************************************************************** * Chromium Settings页面修改 * 说明 ...

  8. Linux 分支那么多，这里可以帮你缩小选择范围

    Linux 分支那么多,这里可以帮你缩小选择范围 https://wiki.installgentoo.com/wiki/Babbies_First_Linux https://wiki.instal ...

  9. CodeForces - 455D

    Serega loves fun. However, everyone has fun in the unique manner. Serega has fun by solving query pr ...

  10. objdump和backtrace的配合使用

    在程序调试过程中程序崩溃的情况时有发生,把出问题时的调用栈信息打印出来是一种不错的解决办法. 当然还有一些其他方法:https://www.cnblogs.com/jiangyibo/p/865372 ...