jQuery(javascript)无法跨域，怎么解决？是想获取iframe的框架里面的东西!!

Posted 2023-03-19

我用了iframe框架,想获取里面的一些元素，但是被提示没有权限，查了资料是js无法跨域。但是，我都是同一个域名啊。我是用asp.net。请问高手怎么是解决的呀？就像图一样，我点单击左边框架的链接，右边框架就会显示相应的页面.我现在在这个页面，用js想获取右边框架的一些元素。这个问题怎么解决呢?

这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 html 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

　经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。
1function ShowExit()
2//获取iframe的window对象3var topWin = window.top.document.getElementById("topNav").contentWindow;
4//通过获取到的window对象操作HTML元素，这和普通页面一样5 topWin.document.getElementById("exit").style.visibility = "visible";
6
　　说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。
http://www.cnblogs.com/sunyunh/archive/2012/09/15/2687056.html 参考技术A 小波，我看过你的页面，你是一个大框架，然后左边一个，右边一个。对于左右2个框架是平等的关系。你想要在左框架获取右框架的元素是不算跨域的。他们同属于一个父节点。所以，你只需要先调用父节点对象，然后从父节点访问子节点即可。像这样：parent.frames['rightF'].document;rightF是右边框架的名字。如果用的是ID就：parent.document.getElementById('rightF').document; 参考技术B $("iframe").contents().find("#id") 参考技术C if (document.all)//IE
doc = document.frames["MyIFrame"].document;
else//Firefox
doc = document.getElementById("MyIFrame").contentDocument;

JavaScript 中的跨域请求与 jQuery 的 JSONP

【中文标题】JavaScript 中的跨域请求与 jQuery 的 JSONP

【英文标题】：Cross domain request in JavaScript vs. jQuery's JSONP

【发布时间】：2017-01-11 04:55:24

【问题描述】：

我试图按照下面提到的here 模板，从客户端（浏览器）用 JavaScript 编写跨域请求（例如，Google Finance resource）：

function createCORSRequest(method, url) 
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) 
    xhr.open(method, url, true);    
   else if (typeof XDomainRequest != "undefined") 
    xhr = new XDomainRequest();
    xhr.open(method, url);    
   else     
    // Otherwise, CORS is not supported by the browser.
    xhr = null;    
  
  return xhr;


var url = 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL';
var xhr = createCORSRequest('GET', url);
if (!xhr) 
  throw new Error('CORS not supported');


// Response handlers.
xhr.onload = function() 
    var text = xhr.responseText;
    var jsonReturend = JSON.parse(text);
    console.log(jsonReturend)
;

xhr.onerror = function() 
    alert('Woops, there was an error making the request.');
;

xhr.send();

但这不起作用，因为（我认为）“finance.google.com”在其响应标头中不包含Access-Control-Allow-Origin:，这是可以理解的。但是，我在 *** 帖子 here 上尝试了另一种建议的方法来使用 JSONP，如下所示：

$.ajax(
    url: 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL', 
    jsonp: "callback",
    dataType: "jsonp", 
    data: ,
    // Work with the response
    success: function( response ) 
        console.log( response ); // server response
    
);

并且它有效（也就是说，我得到了预期的 JSON）！作为 Web 开发和一般 JS 的新手，我不确定为什么通过 jQuery 的 JSONP 调用 AJAX 是有效的，而在纯 JavaScript 中却失败了。我的问题是：

JSONP 有什么不同的做法来使事情正常进行？或者仅仅是 因为“finance.google.com”允许 JSONP 类型的请求（但是 不是 CORS 类型的请求）？ 是否可以通过严格使用 JavaScript 使其工作？如果是这样的话， 我怎样才能做到这一点？

谢谢大家的回答！

【参考方案1】：

服务器必须使用Access-Control-Allow-Origin 允许跨源 XHR 请求。 JSONP 是一种解决它的机制。

这个 wiki 页面很好地描述了它的工作原理。请参阅脚本元素注入部分。

https://en.wikipedia.org/wiki/JSONP

这个 *** 答案展示了如何使用纯 javascript 进行 jsonp 调用。

Can anyone explain what JSONP is, in layman terms?

【讨论】：

感谢您的回复。我现在明白 jQuery 在后台为我们做了很多工作以使 JSONP 工作。但是在您分享的最后一个链接中，它展示了如何在纯 JavaScript 中执行此操作，代码如下所示： var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () if (xhr.readyState == 4 && xhr.status == 200) //我们从不进入这里，因为 'xhr' 似乎总是出错 ; ; xhr.open("GET", "my-google-finance-link-in-question", true); xhr.send();它似乎不起作用。你能帮我解释一下为什么吗？谢谢！

对于需要创建脚本标签的jsonp请求，将src标签指向带有回调的请求url，然后将其附加到html的head部分。这将发出一个正常的脚本请求，但是因为我们在请求 url 中指定了一个回调，所以一旦 jsonp 请求完成，就会调用回调函数。 sn-p代码如下：var tag = document.createElement("script"); tag.src = 'somewhere_else.php?callback=foo'; document.getElementsByTagName("head")[0].appendChild(tag);jsonp请求完成后调用回调函数foo。

【参考方案2】：

首先，我将在此处显示请求的响应：

// [  "id": "694653" ,"t" : "GOOGL" ,"e" : "NASDAQ" ,"l" : "796.87" ,"l_fix" : "796.87" ,"l_cur" : "796.87" ,"s": "2" ,"ltt":"4:00PM EDT" ,"lt" : "Sep 2, 4:00PM EDT" ,"lt_dts" : "2016-09-02T16:00:02Z" ,"c" : "+5.47" ,"c_fix" : "5.47" ,"cp" : "0.69" ,"cp_fix" : "0.69" ,"ccol" : "chg" ,"pcls_fix" : "791.4" ,"el": "796.01" ,"el_fix": "796.01" ,"el_cur": "796.01" ,"elt" : "Sep 2, 7:45PM EDT" ,"ec" : "-0.86" ,"ec_fix" : "-0.86" ,"ecp" : "-0.11" ,"ecp_fix" : "-0.11" ,"eccol" : "chr" ,"div" : "" ,"yld" : ""  ] 

实际上，您的 javascript 模板中的 XHR 请求有效。当脚本尝试解析 JSON 文本 (var jsonReturend = JSON.parse(text);) 时会发生错误。发生这种情况是因为您将解析的文本不是一个好的 json 文本。您会看到上面的响应，它的开头有两个斜杠。 JSON不应该有它。 因此，要使JSON.parse() 可以解析文本，您需要删除这些斜杠。这是您的 javascript 块的修复：

// Response handlers.
xhr.onload = function() 
    var text = xhr.responseText;
    text    = text.replace("// ","");// replace slashes, make it a pure JSON text
    var jsonReturend = JSON.parse(text);
    console.log(jsonReturend)
;

现在，JSON.parse() 将能够解析文本。 jquery ajax 请求中的 JSONP 只是格式化请求响应的一个选项。它与请求本身无关。如果将 ajax 选项设置为 dataType:"jsonp"，则脚本将起作用。如果您将其设置为dataType:"json"，该脚本将不起作用。 dataType 选项定义了响应的格式。 当然，您也可以使用dataType:"text"。但你不能直接将它用作对象或 JSON。

【讨论】：

感谢您的提示。我按照您的建议替换了xhr.onload 中的代码，但它仍然给了我xhr.onerror 以及错误消息“XMLHttpRequest 无法加载finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL。请求的资源上不存在“Access-Control-Allow-Origin”标头。在 Chrome 开发工具中。如果我遗漏了什么，请告诉我。

但是，我认为这是服务器端的问题。