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. curl: (48) An unknown option was passed in to libcurl怎么解决

    想装一个Python版本管理的工具pyenv.结果提示我没有curl.于是从网上百度找到了一篇博客还是不错按照操作提示都成功了.这是那篇博客的地址:https://www.cnblogs.com/su ...

  2. kafka consumer重复消费问题

    在做分布式编译的时候,每一个worker都有一个consumer,适用的kafka+zookeep的配置都是默认的配置,在消息比较少的情况下,每一个consumer都能均匀得到互不相同的消息,但是当消 ...

  3. 将GETDATE()转换为指定日期格式的varchar类型

    CREATE FUNCTION [dbo].[FormatDate] (@date as datetime, ) ) ) AS BEGIN ) set @datestring=@formatstrin ...

  4. Python 进程池的异步方法

    import time from multiprocessing import Process,Pool def f1(n): time.sleep(0.5) # print(n) return n* ...

  5. linux ipv6开启的配置文件

    1./etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetUUID=9d1d6e2a-cfc5-4e60-8f28-b77 ...

  6. APPicon的生成

    APPIcon 工厂图标的生成:http://icon.wuruihong.com/#/home

  7. jsp/servlet环境搭建

    手动配置servlet开发环境: 1. eclipse.tomcat.jdk下载安装: 2. eclipse新建项目,项目依赖tomcat的jar包(包含tomcat和servlet相关jar包)以及 ...

  8. 【java多线程】队列系统之PriorityBlockingQueue源码

    一.二叉堆 如题,二叉堆是一种基础数据结构 事实上支持的操作也是挺有限的(相对于其他数据结构而言),也就插入,查询,删除这一类 对了这篇文章中讲到的堆都是二叉堆,而不是斜堆,左偏树,斐波那契堆什么的  ...

  9. 什么是pytorch（4.数据集加载和处理）(翻译)

    数据集加载和处理 这里主要涉及两个包:torchvision.datasets 和torch.utils.data.Dataset 和DataLoader torchvision.datasets是一 ...

  10. np金融量化分析

    在所有的np中都是已返回值的形式进行修改的,否则不会修改  只是显示内容 形状是三维数据  全0数组 reshape也可以将二维的变成一维的 下标和切片 一维的切片 二维切片 . 列表切片 给一个数组 ...