使用 jQuery 更新 div [重复]
Posted
技术标签:
【中文标题】使用 jQuery 更新 div [重复]【英文标题】：Update a div with jQuery [duplicate] 【发布时间】：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 ereturn""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)elsevar 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 手册文档也很棒。
【参考方案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 格式的结果
【讨论】：
以上是关于使用 jQuery 更新 div [重复]的主要内容，如果未能解决你的问题，请参考以下文章