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

    原题链接:http://acm.timus.ru/problem.aspx?space=1&num=1073 分析:dp,dp[i]表示钱为i且恰好用完时能买的最少土地数,易知dp[i]=mi ...

  2. laravel5.1 使用中间表的多对多关联

    用户表user 标签表tag 中间表user_tag(user_id,tag_id) 在user模型中定义tags关联如下: public function tags() { return $this ...

  3. LightOJ 1096 - nth Term 矩阵快速幂

    http://www.lightoj.com/volume_showproblem.php?problem=1096 题意:\(f(n)  = a * f(n-1) + b * f(n-3) + c, ...

  4. Codeforces Round #420 (Div. 2) A-E

    本来打算划划水洗洗睡了,突然听到这次的主人公是冈部伦太郎 石头门(<steins;gate>)主题的比赛,岂有不打之理! 石头门真的很棒啊!人设也好剧情也赞曲子也特别好听. 推荐http: ...

  5. 【BZOJ】1707: [Usaco2007 Nov]tanning分配防晒霜

    [算法]贪心扫描线(+堆) [题意]给定n头牛有区间[a,b],m个防晒霜值为ai,每个可以使用bi次,每次可以使包含它的区间涂到防晒霜,问最多被涂牛数. [题解] 参考:[bzoj1707]: [U ...

  6. 【CodeForces】576 B. Invariance of Tree

    [题目]B. Invariance of Tree [题意]给定n个数的置换,要求使n个点连成1棵树,满足u,v有边当且仅当a[u],a[v]有边,求一种方案或无解.n<=10^5. [算法]数 ...

  7. php跳转网络连接

    laravel用 redirect 跳转 HTTP 即可.可以把网址看作路由 例如: if($newsInfo->type == 77){ return redirect('http://192 ...

  8. 浅谈卡特兰数(Catalan number)的原理和相关应用

    一.卡特兰数(Catalan number) 1.定义 组合数学中一个常出现在各种计数问题中出现的数列(用c表示).以比利时的数学家欧仁·查理·卡特兰的名字来命名: 2.计算公式 (1)递推公式 c[ ...

  9. Python面向对象学习 1 (什么是面向对象，面向对象的应用场景,待更新)

    程序设计的三种基本结构: 面向对象,面向过程,函数式编程   1,什么是面向对象编程    面向对象编程是一种编程方式,此编程方式的落地需要使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就 ...

  10. ubuntu10.04 svn安装方法

    ubuntu10.04 svn安装方法:sudo apt-get install subversion sudo apt-get install libneon27-dev orsudo apt-ge ...