189 8069 5689

javascript跨域,js解决跨域的三种方法

什么是javascript跨域访问

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

成都创新互联公司专注于大通网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供大通营销型网站建设,大通网站制作、大通网页设计、大通网站官网定制、微信平台小程序开发服务,打造大通网络公司原创品牌,更为您提供大通网站排名全网营销落地服务。

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

特别注意两点:

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

jsonp跨域的原理是什么?

jsonp其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。

JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

相关信息:

由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。

同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。

JavaScript 怎么跨域获取 iframe 中的内容

要解释这个问题,首先要解释两个技术点。

每个“窗口”都是一个JS Runtime,即JS的运行时。如果只有一个窗口,那么就只有一个Runtime;如果一个窗口下面还有一个iframe,那么就有两个Runtime;以此类推。

Runtime之间互操作(或者通信)是有跨域限制的。也就是说,如果这个窗口本身是a.baidu.com域名下的页面,那么如果这个页面下还有一个iframe,这个iframe中加载的页面是b.baidu.com域名下的。那么外层的JS。就不能跟这个iframe中的内容互操作(或者通信)。

因此外层Runtime中的JS想操作内层iframe中的内容,就必须要避免跨域限制。要么内层iframe加载页面的域名跟外层是一样的。要么就是需要在内层iframe加载的页面中执行document.domain = 'baidu.com';从而设置跟外层的主域相同。

例如,当前页面是a.baidu.com/test.html

html

head

/head

body

iframe id="iFrm1" src = "0c893329b8c9af6ff578db9b1a128d13"margin: 0px; padding: 0px; color: rgb(69, 69, 69); font-family: arial, 宋体, sans-serif, tahoma, 'Microsoft YaHei'; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"

iframe中加载的页面内容如下:

html

head

/head

body

div id="innerDiv"恭喜操作到内部iframe中的元素了!!!/div

script

document.domain = 'baidu.com';

/script

/body

/html

在HTML5中新增了postMessage的API。可以方便窗口跟内部iframe之间进行通信,并且可以实现跨主域通信。但是有一些限制,1.老版本的浏览器一般不支持。2.父窗口只能向iframe中发送信息,iframe只能收消息,且父窗口不能直接操作iframe中的内容。3.父窗口发送的数据也是有限制的。只能发送基本数据类型或者plain object。

怎样用JS跨域实现POST

这次给大家带来怎样用JS跨域实现POST,JS跨域实现POST的注意事项有哪些,下面就是实战案例,一起来看一下。

javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了。

此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 postMessage 来向调用者返回值。

第一步,我们先实现一个接受 jsonp 的后端代码,至于用什么语言实现,各位自已决定。

js跨域调用如何实现?

1.什么是跨域

经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

2.解决方案:

服务器端:

protected void Page_Load(object sender, EventArgs e)

{

string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

Response.Clear();

Response.Write(result);

Response.End();

}

客户端:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title/title

script type="text/javascript"

var result = null;

window.onload = function () {

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "";

var head = document.getElementsByTagName("head")[0];

head.insertBefore(script, head.firstChild);

};

function callback(data) {

result = data;

}

function b_click() {

alert(result.name);

}

/script

/head

body

input type="button" value="click me!" onclick="b_click();" /

/body

/html

javascript 跨域 问题

XMLHttpRequest2 进行跨域访问时需要服务器许可,不是任何域都接受跨域请求的。先来看一下从 Yahoo YQL 域返回的响应头(Response Header ):

HTTP/1.1 200 OK

Set-Cookie: AO="o=1s=1dnt=1"; Version=1; Domain=yahoo.com; Max-Age=630720000; Expires=Sat, 18-Jun-2033 10:07:41 GMT; Path=/

Access-Control-Allow-Origin: *

Cache-Control: public, max-age=899

Content-Type: text/xml;charset=utf-8

Content-Encoding: gzip

Vary: Accept-Encoding

Date: Sun, 23 Jun 2013 10:07:40 GMT

注意里面有一条标识 Access-Control-Allow-Origin:* ,这就表示允许跨域访问,所以可以正常访问该域,而对于其他没有该标识的域就会出现禁止访问提示。

那么如何设置呢?如果要接受跨域访问请求,就必须在服务器端返回的资源中加入 Access-Control-Allow-Origin 头标识, Access-Control-Allow-Origin 的值可以是 URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求。比如,在 HTML 中可以设置:

meta http-equiv="Access-Control-Allow-Origin" content="*"

meta http-equiv="Access-Control-Allow-Origin" content=""


网站标题:javascript跨域,js解决跨域的三种方法
转载来源:http://cdxtjz.cn/article/dsddcsh.html

其他资讯