基于iframe实现ajax跨域请求获取网页中ajax数据

网络编程 2024/12/26 佚名

3 1 2

大家都知道，在不同域的情况下是不能发送ajax请求的，浏览器会报如下错误：

同时，内嵌的iframe中无法进行跨域通信的，也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe，不过并没有什么意义)。iframe跨域通信时，浏览器会报如下错误：

其实这两个问题都是由于跨域造成的。

下面就介绍如何解决这个问题。

其实问题的关键就在于，浏览器在解析ajax请求地址时会和当前网页的地址进行比较，如果是跨域的，那就禁止掉并且报错。那么我们如果让浏览器解析出的ajax地址和当前网页的解析地址一样，浏览器不就不会禁止我们的请求了么。

那么浏览器是如何解析url的呢？

首先当浏览器访问一个域名时，会查询本地的DNS缓存中是否有关于这个网址对应ip地址，如果有的话，直接从本地取得ip地址然后访问，如果没有，浏览器就会向DNS服务器发出DNS请求获得该域名对应的ip地址然后存入本地缓存然后访问。

那么介于以上问题，我们只要在本地伪造一条域名的解析方式，然后再通过伪造的域和目标域进行跨域请求不就可以了么。

windows下的打开C:\Windows\System32\drivers\etc
这个文件夹下有一个hosts文件，如果改过hosts来上谷歌的同学对这个应该很熟悉，在hosts文件里加上这样一段代码：

127.0.0.1 a.目标网址.com

这样你的访问a.目标网址.com就和访问localhost一样了，这样做的目的是方便搭起本地的服务时，本地的服务和目标的域名之间就不会存在跨域问题了，这样就能在本地，通过在目标网页植入iframe标签的方式，向目标域发起跨域请求，取得目标域的数据。

直接上代码(用了jQuery)

脚本代码，直接插在父域

var mySrc = "http://a.目标网址.com:9000/myIframe.html";

document.domain = "目标网址.com";  //关键代码，将域提升到根域

$("body").append('<iframe src=' + mySrc + ' name="myIframe" id="getData"></frame>');  //向目标网页插入iframe

var interval;

function start() {
 $("#getData").attr({"src": mySrc});
 interval = setInterval(function() {
  window.myIframe.run(getLogitic); //向子域传入回调函数  
 },10000)
}

function stop() {
 clearInterval(interval);
}

function getLogitic(orderId) {
 $.ajax({
  url: '/query"htmlcode">

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="/UploadFiles/2021-04-02/jquery.js">

注意：
只有将iframe提升到根域，这样才能与父window通信，耳document.domain指令只能提升当前域到当前的根域，这也是必须要修改本地hosts文件的原因，这是解决跨域问题的根本。

在抓取目标网页数据之前，要先看目标网页发送ajax请求的方式，得到请求的api，通过目标网页的控制台插入脚本，然后运行，得到要得到的数据，在通过和本地请求的方式，发送到本地。

下面是抓取某物流查询网页中物流信息的过程：

  涂掉的为目标网址；这是向目标网页插入我的脚本，成功后网页中就会被插入了一个地址为本地的，但是域名和目标域相同的iframe。




结果
这些数据可以在请求成功会传回本地。

更多精彩内容，请点击《ajax跨域技术汇总》，进行深入学习和研究。
其实小编也是初识前端，还处在学习和探索当中，希望能与大家一起学习进步。

ajax跨域请求,获取ajax数据

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“基于iframe实现ajax跨域请求获取网页中ajax数据”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

基于iframe实现ajax跨域请求获取网页中ajax数据

Ajax+js实现异步交互

Ajax学习笔记整理

评论“基于iframe实现ajax跨域请求获取网页中ajax数据”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

基于iframe实现ajax跨域请求 获取网页中ajax数据

Ajax+js实现异步交互

Ajax学习笔记整理

评论“基于iframe实现ajax跨域请求 获取网页中ajax数据”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

基于iframe实现ajax跨域请求获取网页中ajax数据

评论“基于iframe实现ajax跨域请求获取网页中ajax数据”