动态script标签解决跨域问题实例

最新推荐文章于 2024-01-05 17:29:32 发布
最新推荐文章于 2024-01-05 17:29:32 发布
阅读量1.8k 收藏
点赞数
分类专栏： JavaScript 文章标签： function html callback button string date
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruanzhengly/article/details/1753880
版权
request(jssyncreq.jsp):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function JSONscriptRequest(fullUrl) {
    this.fullUrl = fullUrl;
    this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
    this.headLoc = document.getElementsByTagName("head").item(0);
    this.scriptId = 'JscriptId' + JSONscriptRequest.scriptCounter++;
}

JSONscriptRequest.scriptCounter = 1;

JSONscriptRequest.prototype.buildScriptTag = function () {

    this.scriptObj = document.createElement("script");
    this.scriptObj.setAttribute("type", "text/javascript");
    this.scriptObj.setAttribute("charset", "gbk");
    this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
    this.scriptObj.setAttribute("id", this.scriptId);
}


JSONscriptRequest.prototype.removeScriptTag = function () {
    this.headLoc.removeChild(this.scriptObj); 
}

JSONscriptRequest.prototype.addScriptTag = function () {
    this.headLoc.appendChild(this.scriptObj);
}

function deal(obj) {
    alert(Blog.info);
}

function test() {
    var req = "jssyncres.jsp?callback=deal";
    bObj = new JSONscriptRequest(req);
    bObj.buildScriptTag();
    bObj.addScriptTag();
}

</script>
</head>

<body οnlοad=''>
    <button οnclick='test()'>test</button>
</body>
</html>

=========================================================================

response(jssyncres.jsp):

<%
String s1 = request.getParameter("callback");
response.getWriter().print("var Blog = {};Blog.info='test';"+s1+"()"); 
%>
 
ruanzhengly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态创建script标签实现跨域资源访问的方法介绍
09-04
本篇文章主要是对动态创建script标签实现跨域资源访问的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
动态创建script标签解决跨域问题
mhx123456789的博客
07-03 418
动态创建script标签解决跨域问题
实现跨域script原始方式 ，代码实例
sunling的专栏
12-29 347
weather search 北京 上海 天津 重庆 哈尔滨 function callback(data){ console.log(data); var d = data.weather; var tag = ''; for(var i=0;i var that = d[i]; var date = that.da
js跨域的解决方案
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
Javascript中如何解决跨域？
最新发布
蓝斑.json的博客
01-05 506
每种方法都有其适用场景和限制，通常CORS是最常见和推荐的解决方案。需要注意的是，服务器端的配置是解决跨域问题的关键。在客户端（JavaScript）实施跨域解决方案时，通常需要与服务器端的配置相结合。：这是HTML5中的一个功能，允许不同源之间的脚本进行有限的通信。：这是最推荐的方法。服务器设置适当的HTTP头部允许来自不同源的请求。：由于WebSocket不受同源策略限制，因此也可以用来实现跨域通信。：这种方法用于两个有共同顶级域名的页面之间的通信（例如，允许所有域的访问，或者指定某些域可以访问。
9种常见的前端跨域解决方案（详解）
热门推荐
zh0623的博客
03-25 2万+
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com) 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限
Web Worker
06-04 331
Web Worker 在web worker规范产生之前，dom渲染和javascript代码执行是在同一个浏览器线程中执行的。也就是说：渲染dom的时候不能执行javascript代码，执行javascript代码的时候，UI界面会暂停响应。如果javascript代码执行时间很长，那么UI就会无响应，这就是所谓的页面卡死。Web Workers是 HTML5 提供的一个javasc...
【Web】跨域请求
qq_45677671的博客
02-23 1046
文章目录同源策略实现一个跨域请求JSONPscript 标签的本质配置代理正向代理反向代理 同源策略 同源策略是由浏览器给的 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求 当我们向别人的服务器发送请求的时候，就会被浏览器阻止了 什么是“别人的服务器”？ 当 请求协议/域名/端口号 有任意一个不同的时候，那么就算是别人的服务器 这个时候就会触发同源策略 我们管触发了同源策略的请求叫做跨越请求 实现一个跨域请求 有的时候我们是需要实现跨域请求的 我们需要多个服务器给一个页面提供数据 那
解决跨域问题方案实例
09-10
解决跨域问题有多种方法，以下是一些常用的实例： 1. JSONP (JSON with Padding)：这是一种绕过同源策略的方法，利用`<script>`标签没有跨域限制的特性。服务器返回一个JavaScript函数调用，将数据作为参数传递。但...
JSONP跨域请求实例详解
10-22
这种方法主要用于解决现代浏览器中的跨域数据访问问题，因为JSONP不受同源策略的限制。 在JSONP的工作原理中，前端通过动态创建`<script>`标签并设置`src`属性指向服务端的API接口。这个接口应该设计为接收一个特定...
借助node实战JSONP跨域实例
10-20
JSONP（JSON with Padding）是一种跨域数据交互协议，它的基本思想是利用浏览器允许 `<script>` 标签加载不同源的脚本这一特性，通过动态创建 `<script>` 标签并设置其 `src` 属性来发起请求。由于这个过程不受同源...
原生js的ajax和解决跨域的jsonp(实例讲解)
11-27
通过动态创建`<script>`标签，并将服务器返回的JavaScript代码（包含我们需要的数据）作为src的值，从而在客户端执行这段代码。例如： ```javascript var script = document.createElement('script'); script.src = ...
Java利用cors实现跨域请求实例
08-30
为解决这个问题，出现了多种解决方案，包括script标签、iframe、jsonp、服务端中转请求和cors等。 cors（Cross-Origin Resource Sharing）是其中一种解决跨域请求的方式，它是一种网络浏览器的技术规范，定义了一种...
Script标签解决跨域
等，你的到来。
11-16 6102
关于跨域，首先我们来讲一下基础知识。 –什么是跨域请求：从一个域下去访问另一个域下的脚本(js/php)或者文档结构(html)。 –为什么跨域：因为我们往往需要其他域下的数据，另一个因为同源策略的限制，不进行跨域无法直接请求另一个域的数据。 –怎么样进行跨域请求：img、a、form、link、iframe可以跨域，但是没有返回值，所以不进行使用，最主要使用的是script标签。然后，通过j
动态创建 script 实现跨域请求数据
weixin_30378311的博客
11-14 481
动态创建script标签 (由事件触发) 在我们需要请求数据的时候我们就可以动态的创建 script 标签 src设置为我们需要请求数据的地址 另外我们可以附加参数 ？后面附加参数 例如 ：？参数=1&callbacl=cb 我们还可以指定回调函数 回调函数就是我们在得到数据之后需要做什么处理 给这个函数传一个参数 即我们想要的数据 　　 btn.onclick=...
JavaScript解决跨域常用办法
weixin_43450479的博客
06-28 249
跨域 跨域的产生原因 处于对安全方面的考虑，浏览器采取同源策略，即前端不允许跨域调用后端接口 所谓同源/同域：协议，域名，端口 三者都相同才是同源/同域 1. JSONP JSONP（JSON with padding），解决方案：script标签不受浏览器同源策略的影响（script标签的开放策略） 前端设置好回调函数，并将回调函数作为请求url中的参数 服务器通过请求url获取回调函数，并将回调函数放在响应中返回 浏览器收到响应，由于相应的内容是js脚本，浏览器会执行脚本从而达到了跨域的作用 //s
JavaScript中的跨域问题解决方案
m0_75198698的博客
04-28 587
具体实现方式为在客户端创建一个script标签，将其src属性设置为一个跨域请求的URL，并且在URL的参数中添加一个回调函数名。具体实现方式为，在同域的服务器上设置一个代理服务器，将客户端的请求发送给代理服务器，代理服务器再将请求发送给目标服务器，获取目标服务器的响应后再将响应发送给客户端。postMessage是一种跨域解决方案，它可以在不同窗口间进行通信，因此可以通过在不同窗口间发送消息来解决跨域问题。例如，在本地的一个网页中，无法通过AJAX向其他域名的服务器发起请求，这就是跨域问题。
Physijs - Web Worker 跨域访问
木·本的博客
02-04 1127
Physijs 使用了 web worker 以免影响应用程序的性能并且占用 WebGL 渲染时间。 因此在将Physijs添加到项目中时，需要配置Worker Physijs.scripts.worker = './js/physijs_worker.js'; Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运...
jsonp解决vue跨域问题
09-07
JSONP 是一种跨域请求的方法，它通过动态创建 `<script>` 标签来进行跨域请求，然后服务器返回的数据会被包裹在一个函数调用中，从而实现跨域数据的获取。 在 Vue 中使用 JSONP，你可以按照以下步骤操作： 1. 安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值