//修改了一个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. (转) 使用vivado创建工程 1

    此文全文转自:http://svenand.blogdrive.com/archive/169.html#.WaUV9IiGNPY  ,非常感谢! 本人在vivado 2015.4版本测试! When ...

  2. 前端PHP入门-017-系统内置函数-会查阅API

    大家要知道未来这就是你的工具 如果代码能赚钱,帮你赚钱最多的是基本语法 如果你还在当程序员,你最好的伙伴就是手册 问问你自己:你有CSS2.0/3.0手册,JavaScript手册,Jquery手册, ...

  3. 理解PV操作和信号量

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...

  4. 基础知识：BT1120

    今天谈点我所理解的BT1120协议. BT1120是高清晰度电视 (HDTV) 演播室信号数字接口,首先说一下接口标准里面的概念,然后谈谈自己的理解,写这个文章的目的就是解释给自己听的,所以都是一些白 ...

  5. Oracle用imp导入dmp文件记录一下

    ---------------------------------------------------------------------------------------------------- ...

  6. 3.redis设计与实现--字典

    1.包括三个结构体:字典结构体+哈希表结构体+哈希节点结构体 2.如何解决哈希冲突? 答:redis使用的是链地址法来解决哈希冲突的,每个链表节点有一个next指针,最新加入的节点会放在链表的头部. ...

  7. dp+分类讨论 Gym 101128E

    题目链接:http://codeforces.com/gym/101128 感觉这个人写的不错的(我只看了题目大意):http://blog.csdn.net/v5zsq/article/detail ...

  8. 构造+分块思想 Codeforces Round #319 (Div. 1) C

    http://codeforces.com/contest/576/problem/C 题目大意: 给你一个曼哈顿距离的图,然后要求你找到一个链,链穿了所有的点 然后要求这链的长度<=25*10 ...

  9. SpringCloud（四）服务发现与消费：以ribbon为例

    说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...

  10. Delphi 常用数据类型 字符串类型 数据类型等等

    字符串类型 Delphi有三种类型的字符: ●AnsiChar这是标准的1字节的ANSI字符,程序员都对它比较熟悉. ●WideChar这是2字节的Unicode字符. ●Char在目前Delphi早 ...