关于跨域的N种方法实践之iframe+domain

一、原理

  1、主域相同,子域不同,可以设置document.domain来解决跨域。

  2、在http://www.example.com/a.html和http://sub.example.com/b.html两个文件中都加上document.domain = "example.com";

  3、通过a.html文件创建一个iframe,去控制iframe的window,从而进行交互。

二、测试方法

  1、通过gulp启用两个本地服务器,并在hosts文件映射域名(主域名相同,子域名不同)如:

    127.0.0.1     www.jiangqi.cn

    127.0.0.1     top.jiangqi.cn

  2、服务器A的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是A</title>
</head>
    <p id="app2">我是a</p>
<body>
<script>

  document.domain = ‘jiangqi.cn‘;
  let ifrObj = document.createElement(‘iframe‘);
  ifrObj.src = ‘http://top.jiangqi.cn:8081/‘;
  //ifrObj.style.display = ‘none‘;
  document.body.appendChild(ifrObj);
  ifrObj.onload = function() {
//=========================================一、分割线(跨域实践)================================================================================
    let ifrWin1 = ifrObj.contentWindow;
    alert(ifrWin1.data)
    //1、直接获得iframe的window对象之后,获取iframe传过来的data
//=========================================二、分割线(iframe对象的contentWindow属性)===========================================================
      //1、通过iframe对象的contentWindow(非标准属性;只读;大多浏览器都支持),返回指定的iframe的窗口对象
    let ifrWin2 = ifrObj.contentWindow;
    //2、给指定iframe对象的window对象传递参数(父子页面传参)
    ifrWin2.username = ‘张三‘
    //3、直接获取iframe页面内的元素并操作dom元素
    var obj=  ifrWin2.document.getElementsByTagName(‘p‘)[0].innerText ="22";
    //4、在子iframe里可以通过window.parent或者window.top访问父级页面的dom
//=========================================三、分割线(iframe对象的contentDocument属性)=========================================================
    //1、直接获取iframe页面内的元素并操作dom元素。
    let ifrDoc = ifrObj.contentDocument;
    ifrDoc.getElementsByTagName(‘p‘)[0].innerText ="33"
  }
</script>
</body>
</html>

  3、服务器B的代码

<!DOCTYPE html>
<html>
<head>
    <title>我是B域</title>
</head>
<body>
    <p id="app">b</p>
<script>
    document.domain = ‘jiangqi.cn‘;
    window.data = ‘传送的数据:1111‘;

    var obj = parent.document.getElementsByTagName(‘p‘)[0]
    obj.innerText = "我把A改成了B"
</script>
</body>
</html>

三、参考

  1、https://www.cnblogs.com/camille666/p/cross_domain_document_domain.html

  2、https://www.cnblogs.com/goloving/p/7828070.html

原文地址:https://www.cnblogs.com/helloNico/p/10614039.html

时间: 2024-10-10 04:47:32

关于跨域的N种方法实践之iframe+domain的相关文章

vue开发环境和生产环境里面解决跨域的几种方法

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu.com访问https://a.baidu.com: #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80: #域名跨域 http://a.baidu.com访问http://b.baidu.com:   现在很多公司都是采用前后分离的方式开发.那么出现经常和会

AJAX实现跨域的三种方法

转 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认为是不安全的,所以拒绝访问. 会出现跨域问题的几种情况: 后台在百度上寻找解决方案解决了这个问题,一共总结出三种方案:代理.JSONP.XHR2(XMLHttpRequest Level 2). 第一种方法 代理:这种方式是通过后台(ASP.PHP.Ja

跨域的几种方法

js中几种实用的跨域方法原理详解(转自:http://www.cnblogs.com/2050/p/3191744.html) 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法:

跨域的几种方法及案例代码

1.通过动态script实现跨域 function loadScript(url, func) { var head = document.head || document.getElementByTagName('head')[0]; var script = document.createElement('script'); script.src = url; script.onload = script.onreadystatechange = function() { if(!this.

javascript跨域的几种方法

以下的例子包含的文件均为为 http://www.a.com/a.html .http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.html获取b.html里的数据 1.JSONP jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数 function doSomething(data) { // 对data处理 } var scrip

201507152326_《Javascript实现跨域有4种方法——介绍jsonp和html5方法》

一. jsonp方法 1. 原理 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的. 2. 格式 <script> function doSomething(jsondata) { //todo }; </script> <script>http://example.com/data.php?callback=doSomething</script> 二. 使用HTML5中新

javascript 跨域 的几种方法

1.jsonp方法 转:https://blog.csdn.net/liusaint1992/article/details/50959571 主要实现功能: 1.参数拼装. 2.给每个回调函数唯一命名. 3.在回调成功或请求失败之后删除创建的javascript标签. 需要兼容IE.IE下onerror事件不兼容.这里有对它的模拟实现.在IE下加载失败也能get到. 4.超时功能.超时取消回调.执行error. 5.error事件.可执行自己传入的error事件. 代码封装,调用,以及后台代码

.net设置浏览器缓存和跨域的几种方法

1.自定义过滤器属性 public class NoCacheAttribute : FilterAttribute, IActionFilter { public void OnActionExecuted(ActionExecutedContext filterContext) { //设置浏览器缓存 filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache); //设置接口跨域 fil

Springboot 配置cors 跨域的几种方法

作记录用 请参考https://blog.csdn.net/lizc_lizc/article/details/81155895 第一种: 在每个controller上添加 @CrossOrigin 第二种:使用拦截器 1.方法一 @Configurationpublic class CorsConfig { @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource urlBasedCorsConfi