Question

我有一个页面，我使用一个元素加载另一个远程源。一切都很好，除了，现在我希望能够在加载页面时根据某些条件更改脚本的'src'。问题是，当我更改'src'时，即使它在DOM中发生了变化，它也没有任何影响。使用原始的“src”并且从未更新过。

是否可以动态检索远程站点的源，或者该值是否必须是常量？

编辑：以下是我正在尝试的示例：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://voap.weather.com/weather/oap/90210?

template=GENXV&par=3000000007&unit=0&key=XXX"></script>
<script>
$(document).ready(function(){
  var newS = document.createElement('script');
  newS.type = "text/javascript"; 
  newS.src = "http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX";
  $("head").append (newS);
});
</script>
</head>
<body>
</body>
</html>

您会注意到顶部的“脚本”工作正常。我尝试动态添加的脚本根本不起作用。它显示在DOM检查器中，但不显示在页面中。

另请参阅以下内容：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $.getScript("http://w3schools.com/jquery/demo_ajax_script.js");
  $.getScript("http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX");
});
</script>
</head>
<body>
</body>
</html>

在这个例子中，w3school示例有效，但天气没有。

Answer 1

这里有几件事情发生了：

远程服务器返回错误的内容类型
远程服务器返回的脚本使用document.write

第一个问题似乎意味着你不能使用$ .getScript来获取远程脚本。但即使你可以，你也不会因为第二个问题而想要，因为你不能在文档准备就绪后从你的顶级文档中的weather.com运行脚本，除非你想破坏整个页面并替换它与天气数据。

但是，您可以在文档加载完成之前使用您自己的document.write动态插入脚本标记（不要用$（function（）{}）包装它，$（document）.ready（function （）{}）或文档就绪事件处理程序的任何其他变体：

<script type="text/javascript">
document.write('<script src="http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX">' + '<\/script>');
</script>

如果需要，可以使用一些动态逻辑构建这些字符串参数。

Answer 2

未加载脚本，因为它是使用text / html标头返回的。它需要与application / x-javascript的Content-Type标头一起提供并返回。

如果您无法控制脚本所提供的标题，那么我建议您联系提供商并请求他们更改这些标题。

现在它发出警告：

Resource interpreted as Script but transferred with MIME type text/html: "http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX&_=1387307745041"

使用这个小提琴看看自己：http://jsfiddle.net/sVAP9/

Answer 3

＃！

如何摆弄<iframe>元素并使用它来进行xrequests？

我接近（硬核）：

在document.write()之后执行window.onload事情，在运行之前清除所有已加载的内容。异步脚本加载使用'document.write'，浏览器不太喜欢它（查看对来自异步加载的外部脚本的document.write（）的调用被忽略。错误在控制台中）。这样的事可能是（fiddle）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>x</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $( function () {
    var widg$ = $("#widg");
    $("#btn")
    .on({
      click : function () {
        widg$.attr({
          src : "http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX"
        });
      }
    });
  } );
</script>
</head>
<body>
<button id="btn" style="display:block;">load</button>
<iframe 
  id="widg"
  src=""
  frameborder="0" 
  style="margin:0; padding:0; border:none; width:300px; height:500px;" 
  seamless 
></iframe>
</body>
</html>

II 方法（一点点黑客攻击）：

您无法通过浏览器沙箱中的ajax发送xdomain请求，没有后端卷曲的帮助。制作这个php文件（希望你的服务器支持它）：

_ xdread.php

<?php

   header('Content-Type: '. $_POST['url_mime']);
   $url  = $_POST['fetch_url'];
   $ch   = curl_init( $url );
   curl_setopt( $ch, CURLOPT_HEADER, false );
   curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
   echo curl_exec( $ch );
   exit;

将其放在您网页所在的目录中。使用jQuery将http请求发送到本地php文件。将.dataType设置为text/plain，以避免脚本自动解释。它将curl网址并回复响应。 eval在<iframe> .contentWindow的背景下的回复<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>x</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { var widg$ = $("#widg"); $("#btn") .on({ click: function () { $.ajax({ url :'_xdread.php', type :'post', dataType :'text', data :{ fetch_url :'http://voap.weather.com/weather/oap/90210?template=GENXV&par=3000000007&unit=0&key=XXX', url_mime :'text/plain' }, success:function ( jstxt ) { //console.log( jstxt ); widg$[0] .contentWindow .eval( jstxt ); } }); } }); }); </script> </head> <body> <button id="btn" style="display:block;">load</button> <iframe id="widg" src="" frameborder="0" style="margin:0; padding:0; border:none; width:200px; height:300px;" seamless ></iframe> </body> </html>。这样它就不会忽略'xdomain document.write（）'，因为它是在localy：

完成的

{{1}}

Answer 4

您正在使用jQuery，因此请使用getScript。 http://api.jquery.com/jQuery.getScript

如果您已经包含汽车工厂，请不要重新发明轮子。

Answer 5

上述大多数答案都清楚地表明您正在从跨域访问内容返回类型是 text / html 而不是 jsonp ，这可以解决这个问题。

您似乎只使用该服务而不是设计它，这就是您无法更改脚本响应的原因。

有一个解决方案，您可以在html中包含所有可能的脚本，例如

<body>
  <div id="script1">
    <script src="{url of script 1}"></script>
  </div>

  <div id="script2">
    <script src="{url of script 2}"></script>
  </div>

  <div id="script3">
    <script src="{url of script 3}"></script>
  </div>
</body>

根据你的操作只显示那个需要的div并隐藏其他因为通常我们可以更改脚本的scr值，但不会从该URL加载新内容。

因此策略将加载所有脚本，然后只显示其中一个

如何将脚本的“src”更改为远程位置？

5 个答案: