跨域进行 JavaScript 调用

2023-05-14前端开发问题
3

本文介绍了跨域进行 JavaScript 调用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

限时送ChatGPT账号..

这是目标:

移交引用远程服务器上的 JavaScript 文件的脚本标记.该 JavaScript 文件应返回 HTML,然后将显示在调用 HTML 页面上.

Hand off a script tag that references a JavaScript file on a remote server. That JavaScript file should return HTML that will then be displayed on the calling HTML page.

我尝试通过两种方式解决这个问题:

I've attempted to approach this in two ways:

首先,我尝试在 JavaScript 中使用 XMLHttpRequest 来调用这个远程服务器.在 IE 中,它会按预期工作,但 FF、Safari 和 Chrome 会返回一个空响应.我从研究中得到的总体反应是,请求被阻止,因为它尝试访问的服务器与其运行的位置不同(都是本地主机,但端口不同).

First, I attempted to use XMLHttpRequest in JavaScript to call this remote server. In IE, it would work as expected but FF, Safari, and Chrome would return an empty response. The overall response I got from my research was that the request was being blocked since the server it's trying to access is different from where it's running (both localhost, but different ports).

其次,我研究了 Google Gadgets 之类的东西是如何工作的,因为它们有效地为您提供了一个引用外部 JavaScript 的简单脚本标记.据我所知,似乎有某种 iframe 操作仅通过使用的基本 url 进行(下面的示例).这似乎是要走的路,即使使用 iframe 不是我最初的想法.我猜 Google 代码会将 iframe 作为 HTML 返回到嵌入了此脚本的 HTML 文件.

Second, I looked at how things like Google Gadgets work as they effectively give you a simple script tag that's referencing external JavaScript. From what I can gather, it appears that there's some sort of iframe action going on simply by the base url being used (example below). This appears to be the way to go, even though using an iframe wasn't my initial thought. I'm guessing the Google code is returning an iframe as HTML to the HTML file that has this script embedded.

关于我应该如何进行的任何建议?

Any suggestion on how I should proceed?

<script src="http://www.gmodules.com/ig/ifr?url=http://ralph.feedback.googlepages.com/googlecalendarviewer.xml&amp;synd=open&amp;w=320&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

推荐答案

JSONP是处理同源策略的一种非常常见的方式.由于大多数 javascript 框架(例如 jquery)已经支持它,因此您无需了解技术细节即可使用它.
您也可以通过从 javascript 构造 script 标记(如您所提到的)来自己完成这个技巧.谷歌分析代码片段就是这种方法的一个例子:

JSONP is a very common way to deal with same origin policy. Since most javascript frameworks (e.g., jquery) already support it, you don't have to get into technical details to use it.
You can also do the trick yourself by constructing script tag from javascript (as you mentioned). Google Analytics code snippet is an example of such approach:

      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = 'url here';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);

至于 iframe 的想法(如果我理解你的话),它是行不通的.您可以在页面上使用 iframe 元素来显示来自另一台服务器的内容,但浏览器不允许您使用 javascript 从主页访问它.

As for iframe idea (if I understand you currectly), it's not gonna work. You can use iframe element on your page to display content from another server, but browser won't let you access it from main page using javascript.

编辑
这个原始提案详细介绍了 JSONP 的用法:
http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

这篇关于跨域进行 JavaScript 调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13