使用 jQuery 更新 div [重复]答案

【问题标题】：Update a div with jQuery [duplicate]使用 jQuery 更新 div [重复]
【发布时间】：2014-05-08 23:39:05
【问题描述】：

我有一个用于刷新 div 内容的 jQuery 脚本。内容来自外部页面，如 mypage.php。代码是这样的：

page.html:

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//var first_load =
function firstLoad()
{
 $('#load_tweets').load('mypage.php');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('mypage.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body onLoad="firstLoad()";>        
<div id="load_tweets"> </div>
</body>
</html>

如果我从 mypage.php 获取内容，即最后带有 echo 命令的 php 脚本，一切正常。但现在我需要从这里获取 div 的内容：

http://37.187.90.121:3874/currentsong?sid=1&c=

这个源码的输出是这样的：

Inna - Un Momento

如果我将"myage.php" 替换为"37.187.90.121:3874/currentsong?sid=1&c="，page.htm 中的 jquery 脚本将不起作用并返回空白输出。有什么问题？

EDIT1： 好的，是政策问题，我该如何解决？

EDIT2：+ 代理 php 页面解决方案不起作用。我已经制作了这个 php 页面：

<?php
echo file_get_contents("http://37.187.90.121:3874/currentsong");
?>

但是我有这个错误信息：

Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/mhd-01/www.radiowhitecrash.com/htdocs/Player/GTitle/current_g2.php on line 2

Warning: file_get_contents(http://37.187.90.121:3874/currentsong) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /home/mhd-01/www.radiowhitecrash.com/htdocs/Player/GTitle/current_g2.php on line 2

编辑3： 外部服务给我一个 javascript 来获取信息：

window.centovacast===undefined&&(window.centovacast={}),window.centovacast.options===undefined&&(window.centovacast.options={}),window.centovacast.loader===undefined&&(window.centovacast.loader={attempts:0,external_jquery:!1,loaded:!1,ready:!1,widget_definitions:{},url:"",load_script:function(e){var t=document.createElement("script");t!==undefined&&(t.setAttribute("type","text/javascript"),t.setAttribute("src",e),t!==undefined&&document.getElementsByTagName("head")[0].appendChild(t))},load_widget:function(e){var t=this.widget_definitions[e];t.ref===null&&(t.ref=t.define(jQuery))},jq_get_jsonp:function(e,t,n){return jQuery.ajax({type:"GET",url:e,data:t,success:n,dataType:"jsonp"})},jq_ready:function(){this.ready=!0;for(var e in this.widget_definitions)typeof this.widget_definitions[e].init=="function"&&this.widget_definitions[e].init(jQuery)},jq_loaded:function(){this.external_jquery||jQuery.noConflict(),jQuery.getJSONP=this.jq_get_jsonp;for(var e in this.widget_definitions)this.load_widget(e);this.loaded=!0;var t=this;jQuery(document).ready(function(){t.jq_ready()})},wait:function(){setTimeout(function(){window.centovacast.loader.check()},100)},check:function(){typeof jQuery=="undefined"?(this.wait(),this.attempts++):this.jq_loaded()},init:function(){var e=document.getElementsByTagName("script"),t=e[e.length-1],n;n=t.getAttribute.length!==undefined?t.getAttribute("src"):t.getAttribute("src",2),n.match(/^https?:\/\//i)||(n=window.location.href),this.url=n.replace(/(\.(?:[a-z]{2,}|[0-9]+)(:[0-9]+)?\/).*$/i,"$1"),this.external_jquery=typeof jQuery!="undefined",this.external_jquery||this.load_script(this.url+"system/jquery.min.js"),this.check()},add:function(e,t,n){this.widget_definitions[e]||(this.widget_definitions[e]={define:n,init:t,ref:null}),this.loaded&&this.load_widget(e),this.ready&&t(jQuery)}},window.centovacast.loader.init()),window.centovacast.loader.add("streaminfo",function(e){e.extend(window.centovacast.streaminfo.settings,window.centovacast.options.streaminfo),window.centovacast.streaminfo.settings.manual||window.centovacast.streaminfo.run()},function(e){return window.centovacast.options.streaminfo=e.extend({},window.centovacast.options.streaminfo,window.centovacast.streaminfo?window.centovacast.streaminfo.config:null),window.centovacast.streaminfo={pollcount:0,settings:{poll_limit:60,poll_frequency:6e4},state:{},registry:{},check_username:function(e){e+="";if(!this.registry[e]){if(this.registry.length==1){for(var t in this.registry)e=t;return e}return""}return e},get_streaminfo_element:function(t,n){return e("#"+this.registry[t].id[n])},_handle_json:function(t){if(!t)return;var n=this.check_username(t.rid);!n.length&&t.requestdata&&(n=this.check_username(t.requestdata.rid));if(!n.length)return;if(t.type=="error"){var r=t?t.error:"No JSON object";this.get_streaminfo_element(n,"song").html('<span title="'+r+'">Unavailable</span>'),typeof this.settings.on_error_callback=="function"&&this.settings.on_error_callback(r)}else{var i,s=t.data[0];this.state=s,t.data[0].songchanged=s.song!=this.settings.lastsong,typeof this.settings.before_change_callback=="function"&&this.settings.before_change_callback(t);for(i in s)i!="song"&&(typeof s[i]=="string"||typeof s[i]=="number")&&this.get_streaminfo_element(n,i).html(s[i]);if(typeof s.track=="object"){for(i in s.track)i!="buyurl"&&i!="imageurl"&&i!="playlist"&&(typeof s.track[i]=="string"||typeof s.track[i]=="number")&&this.get_streaminfo_element(n,"track"+i).html(s.track[i]);this.get_streaminfo_element(n,"playlist").html(typeof s.track.playlist=="object"?s.track.playlist.title:"");var o=s.track.buyurl?s.track.buyurl:"javascript:void(0)";e("img#"+this.registry[n].id.trackimageurl).attr("src",s.track.imageurl),e("a#"+this.registry[n].id.trackbuyurl).attr("href",o)}typeof this.settings.after_change_callback=="function"&&this.settings.after_change_callback(t);var u=s.song;u&&u!=this.registry[n].current_song&&(this.get_streaminfo_element(n,"song").fadeOut("fast",function(){e(this).html(u),e(this).fadeIn("fast")}),this.registry[n].current_song=u)}},handle_json:function(e,t,n){e&&window.centovacast.streaminfo._handle_json(e)},poll:function(t){var n=(this.settings.local?"/":window.centovacast.loader.url)+"external/rpc.php",r={m:"streaminfo.get",username:t,charset:this.registry[t].charset,mountpoint:this.registry[t].mountpoint,rid:t};e.getJSONP(n,r,this.handle_json)},_poll_all:function(){for(var e in this.registry)typeof e=="string"&&this.poll(e);(this.settings.poll_limit===0||this.pollcount++<this.settings.poll_limit)&&setTimeout(this.poll_all,this.settings.poll_frequency)},poll_all:function(){window.centovacast.streaminfo._poll_all()},register:function(e,t,n,r){this.registry[t]||(this.registry[t]={charset:n,mountpoint:r,current_song:"",id:{}});var i=e.match(/^cc_strinfo_([a-z]+)_/);i&&(this.registry[t].id[i[1]]=e)},load:function(){var t=e(this).attr("id");if(typeof t!="string")return;var n=t.replace(/^cc_strinfo_[a-z]+_/,""),r="",i="",s=/_cs-([A-Za-z0-9\-]+)$/,o=s.exec(n);o&&(r=o[1],n=n.replace(s,"")),s=/_mp-([A-Za-z0-9\-]+)$/,o=s.exec(n),o&&(i=o[1],n=n.replace(s,"")),window.centovacast.streaminfo.register(t,n,r,i)},run:function(){e(".cc_streaminfo").each(window.centovacast.streaminfo.load),window.centovacast.streaminfo.poll_all()}}});

您可以在此链接中查看： http://cp.eu2.fastcast4u.com:2199/system/streaminfo.js

不幸的是没有身份，另外我对 javascript 的经验很少，我无法编辑此脚本的输出。

这个脚本给了我这样的输出：

“电台名称 - 作者 - 歌曲名称”

这是一个链接（如果你点击它会打开另一个页面）。

我只需要获取没有链接的“作者 - 歌曲名称”。有什么想法吗？

编辑4：

我做了另一个测试，我在一个跨度中调用了streaminfo.js，我证明使用javascript的document.getX以各种方式获取跨度的内容，但我得到“未定义”输出：

<html>
<head>
<script language="javascript" type="text/javascript" src="http://cp.eu2.fastcast4u.com:2199/system/streaminfo.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var div = document.getElementsByClassName('cc_streaminfo')[0];
document.write("w1" + document.getElementsByClassName('cc_streaminfo')[0]);
document.write("w2" + document.getElementsByClassName('cc_streaminfo')[1]);
document.write("w3" +  document.getElementsByClassName('cc_streaminfo')[2]);
var container = document.getElementById ("cc_strinfo_summary_radiowhite");
var spans = div.getElementsByTagName("span");
 document.write("il mio  script: " + spans[0] + "!");
document.write("il mio  script: " + container + "!");
//var first_load = 
function firstLoad()
{
 $('#load_tweets').load('current_g.php?song=ciao');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('current_g.php?song=' + cc_streaminfo).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body onLoad="firstLoad()";>   
<br>  
<span id="cc_strinfo_summary_radiowhite" class="cc_streaminfo">sss</span>
<div id="load_tweets"> </div>
</body>
</html>

【问题讨论】：

这个问题是由Same-Origin Policy引起的。一种可能的解决方案是使用mypage.php 作为从远程页面获取内容的代理。然后，您的 jQuery 代码就可以正常访问它了。
好的，这是一个策略问题，我需要如何在 mypage.php 中编写代理？
只需使用file_get_contents() 或cURL 即可获取远程页面的内容并在mypage.php 中回显。如果您对这些功能感到困惑，请在 Google 上搜索示例。你会发现很多。 PHP 手册文档也很棒。

标签： javascript php jquery html

【解决方案1】：

我认为这与 CORS 有关。基本上，除非 37.187.90.121 的网页明确声明它信任运行您网站的域的来源，否则您的浏览器不会发出请求。

如果您是 37.187.90.121 的所有者，您可以添加自定义标头以允许将您的响应包含在其他网页中。

检查您浏览器的 javascript 控制台以获取更多详细信息。

【讨论】：

我不是 37.187.90.121 的所有者，是付费服务的一部分，但我无法编辑它，我只能使用输出。

【解决方案2】：

使用jQuery获取（.load()）另一个页面（相同域）上的div的内容添加到当前页面上的div是这样的：

$("#dividoncurrentpage").load("/otherpage.php #dividonotherpage");

这是你需要的吗？

【讨论】：

看来 OP 正在尝试从 remote 页面获取内容，由于同源策略 AFAIK，该页面无法正常工作。
对我来说肯定（不清楚）..

【解决方案3】：

这是因为：请求的资源上不存在“Access-Control-Allow-Origin”标头。

mstaessen 已在上面的帖子中进行了解释。

另一种解决方案是：您可以创建一个名为 song.php 的文件并添加以下代码。

<?php
echo file_get_contents("http://37.187.90.121:3874/currentsong?sid=1&c=");
?>

并将脚本更新为

<script type="text/javascript">
//var first_load =
function firstLoad()
{
 $('#load_tweets').load('song.php');//.fadeIn("slow");
}
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('song.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>

【讨论】：

【解决方案4】：

最好使用jQuery $.ajax 来获取内容。 Link

通过使用 $.ajax，您有很多方法可以解决此问题，例如 crossDomain 或通过将您将从服务器接收的数据类型设置为 JSON 或 JSONP 来获取 Json 格式的结果

【讨论】：