jsonp原生js跨域拿新浪数据插件封装【可扩展】

//修改了一个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>

转载于:https://www.cnblogs.com/webSong/p/9418828.html

jsonp原生js跨域拿新浪数据插件封装【可扩展】相关推荐

Asp.net WebApi跨域_se7en3_新浪博客
WebApi需要跨域访问,但又不想用jsonp 1.在 Nuget里联机搜索安装 Microsoft.AspNet.WebApi.Cors 2.App_Start/WebApiConfig里加入 R ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
js跨域交互(jQuery+php)之jsonp使用心得
jsonp是什么? 说到jsonp,你可能最先想到JSON:它还真和JSON有关系: JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏 ...
window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
firefox如何载入json文件_如何去解决JS跨域问题怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...

jsonp原生js跨域拿新浪数据插件封装【可扩展】

jsonp原生js跨域拿新浪数据插件封装【可扩展】相关推荐

最新文章

热门文章