浏览器跨域获取Lrc歌词数据的解决办法

获取同一个域的数据,可以通过XMLHTTP组件或IFRAME来实现,不存在跨域访问的权限问题,因此比较简单。
    但如果要访问不同域的数据时,由于浏览器的安全设置,XMLHTTP没有权限获取数据,而IFRAME没有权限将获取的数据传递给父窗口,似乎没有其它解决办法。

顿悟……
    网页内引用不同域的脚本并不会提示权限不足,对了,就是它没错!

解决方法找到了,现在来简单测试一下:

首先在51js.com服务器上新建一页面(Test.html)。

Over-Domain Data Fetching Test Page

var lastScript;
var h=document.getElementsByTagName("head")[0];

function loadScript(url){
var f=document.createElement("script");
var d=new Date().getTime();
f.type="text/javascript";
f.id=d;
f.src=url+'?'+d;
h.appendChild(f);
if(lastScript) g(lastScript).parentNode.removeChild(g(lastScript));
lastScript=d;
}

function g(x){return document.getElementById(x)};

Test Alert

Get My Info

My Name:

My Blog:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解释两个关键点:
    1. lastScript用于存放上次建立的script节点的ID,在下次要再新建script节点时,要删除上次建立的节点,以免加载的脚本越来越多,占用过多的内存。
    2. url后面加了一个数值d是为了防止浏览器缓存脚本数据,在本例中可以不加,但是如果脚本是由服务器动态生成的,那最好加上。

然后再建立两个java script脚本用于测试。

alert.js:
alert('You can see me!');
info.js:
g('myname').value='谱乐视听';
g('myblog').value='www.aboutplayer.com';

好了,谱乐已把它们放在aboutplayer.com服务器下,这样它们和Test.html就不在同一个域内了。

用浏览器打开Test.html文件。
    点击“Test Alert”,应该会弹出对话框显示You can see me!。
    点击“Get My Info”,应该会在文本框中显示本站的信息。

进而,若把Lrc歌词数据放入Js脚本文件中(不是直接更改文件扩展名),就可实现跨域获取Lrc歌词数据了。

(0)

相关推荐

  • 浏览器跨域获取Lrc歌词数据的解决办法

    获取同一个域的数据,可以通过XMLHTTP组件或IFRAME来实现,不存在跨域访问的权限问题,因此比较简单.     但如果要访问不同域的数据时,由于浏览器的安全设置,XMLHTTP没有权限获取数据,而IFRAME没有权限将获取的数据传递给父窗口,似乎没有其它解决办法. 顿悟--     网页内引用不同域的脚本并不会提示权限不足,对了,就是它没错! 解决方法找到了,现在来简单测试一下: 首先在51js.com服务器上新建一页面(Test.html). Over-Domain Data Fetch

  • ajax跨域获取网站json数据的实例

    由于自己的公司的项目需要调用视频地址 1:当为链接时:直接在播放器用数据库查找的地址 2:当为外部链接时:直接用window.location.href('数据库查找的地址') 3:当为H5链接时:使用<ifram src="数据库查找的地址">播放 4:当为其余网站链接时,要去第三方网站读取json信息然后把json数据作为url放在播放器中 当为4时,我使用json时会出格式错误 当用jsonp解决跨域问题时,会出现返回格式接收不到 所以我用 public static

  • iframe跨域与session失效问题的解决办法

    何为跨域跨域session/cookie? 也就是第三方session/cookie.第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会被存储在访客的计算机上.第三方session/cookie指的是当前访问的网站中会加载(嵌入)另外第三方的网站代码,例如促销广告,那么第三方网 站也会在访客的计算机上添加session/cookie,这种就是第三方session/cookie. 我的问题 在开发讯息在线产品(http://iap.p

  • AngularJS iframe跨域打开内容时报错误的解决办法

    <iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

  • jQuery使用ajax跨域获取数据的简单实例

    jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",

  • JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

    通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据.你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用. JQuery获取同域的JSON数据 首先引用jQuery库文件: <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js&quo

  • 使用jsonp实现跨域获取数据实例讲解

    js部分 (function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1.挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2.将data转换成url

  • Ajax的jsonp方式跨域获取数据的简单实例

    jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b

  • jQuery使用JSONP实现跨域获取数据的三种方法详解

    本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/

随机推荐