//修改了一个bug,增加了手动释放垃圾

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jsonp跨域源码插件封装</title>
</head> <body>
<input type="text" id="code">
<input type="button" value="查询" id="serch">
<script>
; (function (win) {
const jsonp = function (dataPack) {
const callback = dataPack.callBack || '';
const code = dataPack.code || 'sh000001';
const getUrl = 'http://hq.sinajs.cn/list=' + code;
let scriPt = document.createElement('script');
scriPt.src = getUrl;
scriPt.id = 'xl';
const oldScript = document.getElementById('xl');
const success = function () {
const val = eval('hq_str_' + code);
//手动垃圾回收
for (let i in window) {
if (/^hq_str_/.test(i)) {
window[i] = null;
}
}
callback && callback(val);
}
const error = function () {
callback && callback('跨域发生了错误!');
}
if (oldScript) {
document.body.removeChild(oldScript);
document.body.appendChild(scriPt);
} else {
document.body.appendChild(scriPt);
} scriPt.onload = success;
scriPt.onerror = error;
}
win.jsonp = jsonp;
})(window);
document.querySelector('#serch').addEventListener('click', function () {
jsonp({
code: document.querySelector('#code').value,
callBack: function (data) {
console.log(data);
}
});
})
</script>
</body> </html>

  

jsonp原生js跨域拿新浪数据插件封装【可扩展】的更多相关文章

  1. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  2. jsonp实现js跨域请求

    sonp是跨域通信的一个协议 具体来说jsonp实现跨域请求其实是使用js文件引用(js文件不一定是.js结尾)可跨域的性质,将请求的结果包裹在客户端需要调用的js方法内部.需要前后端配合使用. 前段 ...

  3. js跨域问题新方案

    只要创建一个空图片. js代码: var data = "http://localhost:8080/test?id="+id+"&content="+ ...

  4. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  7. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  8. js跨域交互之jsonp - 看完就能让你了解jsonp原理 (原)

    跨域? 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 同源策略? 一般来说 a.com 的网页无法直接与 b.com的服务器沟通, 浏览器的同源策略限制从一个源加载的文档或脚本 ...

  9. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. selenium - switch_to_alert() - 警告框处理

    在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confirm/pro ...

  2. 线性判别分析(Linear Discriminant Analysis)

    1. 问题 之前我们讨论的PCA.ICA也好,对样本数据来言,可以是没有类别标签y的.回想我们做回归时,如果特征太多,那么会产生不相关特征引入.过度拟合等问题.我们可以使用PCA来降维,但PCA没有将 ...

  3. Rabbitmq--topic

    一.前言 前面讲到direct类型的Exchange路由规则是完全匹配binding key与routing key,但这种严格的匹配方式在很多情况下不能满足实际业务需求.topic类型的Exchan ...

  4. Hadoop 遇到的问题集

    1. Mac 使用ssh命令无法成功 ssh localhost,但是可以ssh其他的 可能原因:ssh服务未启动 解决方法: 1.启动sshd服务: sudo launchctl load -w / ...

  5. 深入探索C++对象模型(七)

    站在对象模型的尖端(On the Cusp of the Object Model) Template 下面是有关template的三个主要讨论方向: template的声明,基本上来说就是当你声明一 ...

  6. thinkphp 5 where 组合条件map数组or

    if($inviterId>0) { $arr = Db::table("tablename")-> where("pid=$inviterId") ...

  7. Error creating bean with name 'transactionManager' defined in ServletContext resource XXX

    spring & hibernate整合时候 ,并且使用hibernate.cfg.xml文件时回报这个错误, 解决办法,在hibernate.cfg.xml中加入 <property ...

  8. [SDOI2005]区间

    题目描述 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

  9. 编程笔记:JavaScript 中的类型检查

    在Badoo的时候我们写了大量的JS脚本,光是在我们的移动web客户端上面就有大概60000行,可想而知,维护这么多JS可是相当具有挑战性的.在写如上规模js脚本客户端应用的时候我们必须对一件事保持警 ...

  10. css3背景色过渡

    <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf ...