美文网首页
JS四种跨域方式

JS四种跨域方式

作者: lmmy123 | 来源:发表于2018-01-12 11:12 被阅读23次

1.JSONP

script标签是不受同源策略限制的,它可以载入任意地方的javascript文件,而不要求同源

jsonp的理念是:我和服务器端约定好一个函数名,当我请求文件的时候,服务端返回一段JavaScript,这段JavaScript调用这个约定好的函数,并且将数据当做参数传入

demo:

index.html

<script>

  function  getWeather(data){

              console.log(data)

      }

</script>

<script src="http://x.y.com/xx.js">

http://x.y.com/xx.js

getWeather({

            "城市": “北京”,

             "天气":大雾“”

})


2.document.domain

使用条件:

 1.有其他页面window 对象的引用

  2.二级域名相同

  3.协议相同,

   4.端口相同

document.domain默认的值是整个域名,所有即使两个域名的二级域名一样,那么他们的document.domain也不一样

demo

两个网站: http://wenku.baidu.com   http://zhidao.baidu.com

这两个网站都是 http协议, 端口都是80, 二级域名都是 baidu.com

打开http://wenku.baidu.com/,在 console 中输入代码:

document.domain ='baidu.com';

varotherWindow =window.open('http://zhidao.baidu.com/');

我们现在已经发现百度知道的网页已经打开了,在百度知道网页的 console 中输入以下代码:

document.domain ='baidu.com';

现在回到百度文库的网页,我们就可以使用百度知道网页的window对象来操作百度知道的网页了。例如:

vardivs = otherWindow.document.getElementsByTagName('div');

这种方法主要用在控制<iframe>的情况中

我们在 iframe.html 中使用 JavaScript 将document.domain设置好,也就是 example.com。

在 index.html 执行以下脚本:

variframe =document.getElementById('iframe');document.domain ='example.com';iframe.contentDocument;// 框架的 document 对象

iframe.contentWindow;// 框架的 window 对象

这样,我们就可以获得对框架的完全控制权了。


3.window.name

随意打开一个页面,输入以下代码:

window.name ="My window's name";location.href ="http://www.qq.com/";

再检测window.name:

window.name;// My window's name

可以看到,如果在一个标签里面跳转网页的话,我们的window.name是不会改变的。

基于这个思想,我们可以在某个页面设置好window.name的值,然后跳转到另外一个页面。在这个页面中就可以获取到我们刚刚设置的window.name了。

由于安全原因,浏览器始终会保持window.name是string类型。

这种方法与document.domain方法相比,放宽了域名后缀要相同的限制,可以从任意页面获取string类型的数据。


4.html5 postMessage

windowObj.postMessage(message, targetOrigin)

windowObj: 接受消息的window对象

message:在最新的浏览器中可以是对象

targetOrigin: 目标的源,*表示任意

message 事件就是用来接收 postMessage发送过来的请求的,函数参数的属性有下几个:

   :origin:发送消息的window的源

    :data: 数据

     :source: 发送消息的window对象

demo:

var windowObj= window;//可以是其他的  window对象的引用

var  data  =null;

addEventListener("message", function(e){

if(e.origin == 'http://jasonkid.github.ib/fezone'){

         data= e.data;

        e.source.postMessage('got  it', '*')

    }

})

文章来源: https://segmentfault.com/a/1190000003642057

相关文章

  • JS四种跨域方式

    1.JSONP script标签是不受同源策略限制的,它可以载入任意地方的javascript文件,而不要求同源 ...

  • 实现前端跨域的几种方式

    1、jsonp跨域实现方式 server.js 2、CORS跨域实现方式 index.html server1.j...

  • 谷歌浏览器获取本地json文件跨域问题及JSONP的应用

    最近需要读取本地json文件,找到了原生js方式和ajax方式,都会报跨域的问题。于是研究了下什么是跨域,为什么会...

  • 利用form做跨域请求

    怎么做跨域请求? js+form+iframe 优点:跨域提交get和post的方式访问都是可以的 缺点:没有返回...

  • 跨域

    跨域 什么是跨域: 解决跨域 通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...

  • 跨域问题详解分析

    参考文档 CORS详解 跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解 跨域的那些事儿 跨域与跨域...

  • 2021-02-23

    一、什么是跨域 二、vue.config.js 跨域配置

  • 四种跨域方式

    1、jsonp 2、postMessage 3、iframe + document.name 4、document...

  • js跨域请求方式

    回答:(1)、通过jsonp跨域;(只能抓去get方式的请求) (2)、通过修改document.domain来跨...

  • HTML-获取iframe元素的正确方法

    跨域相关文章详解js跨域问题JavaScript跨域总结与解决办法 解释最清楚的jsonpWhat is JSON...

网友评论

      本文标题:JS四种跨域方式

      本文链接:https://www.haomeiwen.com/subject/owwxoxtx.html