window.name实现ajax跨域post请求

最新推荐文章于 2024-09-05 16:30:17 发布
原创 最新推荐文章于 2024-09-05 16:30:17 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #iframe #jquery #variables #dojo #cookies

首先不得不佩服想出用window.name来传递和保存数据的人!

 

项目中需要用到ajax跨域作post请求,原本以为是没法解决的问题,没想到找到了window.name

 

http://www.blueidea.com/tech/web/2008/6147.asp

 

window.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的（详细见原文：《Session variables without cookies》），后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ，并引入到了 Dojo （dojox.io.windowName），用来解决跨域数据传输问题。

 

window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

大致原理就是:

1, 请求前,在页面上创建一个iframe,地址是被请求的页面

2, 将请求post到该iframe

3, 服务器端将数据写入window.name, 实际上写入到了页面上新建的这个iframe的window.name

4, 修改iframe的src(window.name是不变的,关键),改成同域的某个地址,比如:http://yourdomain.com/robots.txt

5, 直接访问该iframe的window.name获取数据

 

window.name的jquery实现:

 

http://plugins.jquery.com/project/windowNameTransport

 

(不知道为什么jquery的实现代码量那么大)

 

首先需要在域名根目录下放置一个空文件robots.txt (实际上可以为任意文件,但一般都会有robots.txt或crossdomain.xml这几个文件)

 

代码片段:

 

helloint
关注
最完整的跨域解决方案
myheartYY的博客
05-20 651
文章目录前言一、什么是“同源策略”二、如何解决跨域1.cookie2.iframea、片段标识符（hash）b、window.namec、跨文档通信API（window.postMessage）3.AJAXa、JSONPb、websocketc、CORS（跨域资源共享）i. 简单请求i. 非简单请求 前言   最近准备面试刷题刷到了跨域，因此根据自己的学习和网上的资料进行了一个整理，也相当于复习了。本文根据cookie、iframe和AJAX三个方向总结如何解决跨域。文章部分内容参考了阮一峰大佬的博客，也
window.name 结合postMessage api 实现跨域
xiongzhengxiang的专栏
07-30 954
html5 postMessage实现跨域 postMessage是html5的一个新功能，可以实现不同域名之间的通信，通过给postMessage方式发送数据，监听则通过在父子窗口添加onmessage事件进行。 缺点也就很明显了，只有支持html5的浏览器才支持这种跨域方式，像IE6、7当然就拒之门外了！
window.name 跨域实现原理及实例
feng
11-08 9674
先引用一段话： window.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的。后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ，用来解决跨域数据传输问题。 window.name 的美妙之处：name值在不同的
window.name解决跨域问题的文档
11-17
window.name解决跨域问题的文档,刚才网上发现的.也许有点作用
ajax跨域 - 利用window.name（iframe是关键）
weixin_30756499的博客
11-20 110
其实这种跨域的处理方式和之前讨论过的（http://hi.baidu.com/chyong168/blog/item/12214e4bce53903508f7ef77.html）主要思路一致， 只是利用window的特殊属性window.name完成跨域而已。 ----------------------------------------------------------------...
后端传输流跨域_window.name实现的跨域数据传输
weixin_36296325的博客
02-05 181
这篇文章是对JavaScript跨域总结与解决办法的补充。有三个页面：a.com/app.html：应用页面。a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。实现起来基本步骤如下：在应用页面(a.com/app.html)中创建一个iframe，把其src指向...
JavaScript使用HTML5的window.postMessage实现跨域通信例子
10-26
JavaScript利用window.postMessage实现跨域通信，首先需要了解的是同源策略：当两个页面具有相同的协议、端口和主机名时，我们说这两个页面具有相同的源。同源策略是一种安全机制，它限制了不同源之间的文档或脚本间...
HTML5中使用postMessage实现Ajax跨域请求的方法
09-28
在探讨HTML5中使用postMessage实现Ajax跨域请求的方法之前，首先要明白同源策略（Same-origin Policy）的基本概念。浏览器同源策略是一种安全机制，它限制了来自不同源的文档或者脚本如何进行交互。所谓的“同源”指...
PHP下ajax跨域的解决方案之window.name实例分析
12-20
【PHP下AJAX跨域的解决方案之window.name实例分析】 在Web开发中，由于浏览器的安全策略，同源策略限制了JavaScript进行跨域访问。然而，为了实现不同域名间的通信，开发者们采用了一些策略来绕过这个限制，其中一...
Ajax 跨域如何实现
10-22
关于Ajax跨域实现的知识点，首先需要明白什么是Ajax跨域问题。在Web开发中，出于安全考虑，浏览器会限制网页只能与自己的域进行通信，这就是同源策略。当尝试从一个域的脚本中向另一个域发起Ajax请求时，就会遇到...
window跨域与Ajax请求跨域
逍遥的博客
08-25 744
首先了解一些什么是跨域，什么情况下会产生跨域：  当主域名、子域名、端口号、以及协议任意一个不同时，就会产生跨域，当然，如果Ajax请求时，请求方式不是XHR的话，浏览器是不会限制这种跨域的，在Ajax请求跨域时再详细介绍。  域名： <span style="color:#333333"><span style="color:#000000"><code>...
跨域解决方法之window.name
小白变怪兽
02-24 1万+
window.name 跨域请求 方法
关于跨域的一些知识
zheshihuahua的博客
07-14 1520
跨域 简单的一批 不信你点进来看
解决跨域问题
wx_l617188072的博客
07-01 358
一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port） 二、什么是跨域 当一个请求url的协议、域名、端口
浏览器：跨域及解决方法
热门推荐
snow的博客
05-03 2万+
出于浏览器的限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能不能使用。可以说Web是构建在同源策略基础之上的，。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB2、无法接触非同源网页的 DOM。
跨域问题(CORS)
大白的Java之旅
09-05 900
跨域资源共享（CORS, Cross-Origin Resource Sharing）是浏览器的一个安全机制，用来防止来自一个域的网页对另一个域下的资源进行请求。仅允许向的服务器发送请求。对于前后端分离的项目，往往会有跨域问题。
解决跨域问题（详解9种方法）
TongJ_的博客
08-14 8473
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。为了保证用户信息的安全性，防止恶意窃取当前网站的数据，禁止不同域直接与js代码交互。分布式项目：把后台放在一个服务器里，把前台放在一个服务器中，防止文件相互损坏，防止一个模块导致所有程序运行不起来，可以前后台同时开发，用来节省时间。...
window.name实现的跨域数据传输
chenpingpi
10-10 265
这篇文章是对 JavaScript跨域总结与解决办法  的补充。 有三个页面： a.com/app.html：应用页面。 a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。 b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。 实现起来基本步骤如下： 在应用页面（a.com/app.html）中创...
JS跨域：window.postMessage + window.name +jsonp
HangMine的博客
12-18 960
1.window.postMessage (1)在发送数据窗口执行：otherWindow.postMessage(msg,targetOrigin) otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和js
react-tsx基于iframe实现ajax跨域请求
最新发布
09-26
在 React TSX 中基于 `iframe` 实现 AJAX 跨域请求，可按如下步骤进行： ### 1. 创建 `iframe` 元素 借助 React 的 `useRef` 钩子来创建 `iframe` 元素的引用，然后在组件挂载时插入 `iframe` 到 DOM 里。 ### 2. 与 `iframe` 进行通信 利用 `window.postMessage` 方法达成父窗口和 `iframe` 之间的通信。 ### 3. 在 `iframe` 中发起请求 在 `iframe` 里发起跨域请求，并且把结果传递回父窗口。 以下是一个示例代码： ```tsx import React, { useRef, useEffect } from 'react'; const CrossDomainRequest: React.FC = () => { const iframeRef = useRef<HTMLIFrameElement>(null); useEffect(() => { if (iframeRef.current) { const iframe = iframeRef.current; // 设置 iframe 的源 iframe.src = 'https://example.com/iframe.html'; // 监听来自 iframe 的消息 const handleMessage = (event: MessageEvent) => { if (event.origin === 'https://example.com') { // 处理来自 iframe 的响应数据 console.log('Received data from iframe:', event.data); } }; window.addEventListener('message', handleMessage); return () => { window.removeEventListener('message', handleMessage); }; } }, []); const sendRequest = () => { if (iframeRef.current) { const iframe = iframeRef.current; // 向 iframe 发送消息，请求数据 iframe.contentWindow?.postMessage('Request data', 'https://example.com'); } }; return ( <div> <button onClick={sendRequest}>Send Cross-Domain Request</button> <iframe ref={iframeRef} style={{ display: 'none' }} /> </div> ); }; export default CrossDomainRequest; ``` ### `iframe.html` 文件示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IFrame for Cross-Domain Request</title> </head> <body> <script> window.addEventListener('message', (event) => { if (event.origin === 'https://your-react-app.com') { // 发起跨域请求 const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { // 将响应数据发送回父窗口 event.source.postMessage(xhr.responseText, event.origin); } }; xhr.send(); } }); </script> </body> </html> ``` ### 代码解释 1. **创建 `iframe` 元素**：运用 `useRef` 钩子创建 `iframe` 元素的引用，在组件挂载时设置 `iframe` 的源。 2. **监听消息**：在父窗口监听 `message` 事件，处理来自 `iframe` 的响应数据。 3. **发送消息**：通过 `postMessage` 方法向 `iframe` 发送请求消息。 4. **在 `iframe` 中发起请求**：在 `iframe` 里监听 `message` 事件，接收到请求消息后发起跨域请求，将响应数据发送回父窗口。 ### 注意事项 - 要保证 `iframe` 的源和父窗口的源不同，以此模拟跨域请求。 - 在 `postMessage` 方法中指定目标源，增强安全性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值