Question

我使用Jquery将变量插入div。请检查我的代码。

var msg = '<script src="https://gist.github.com/3010234.js?file=new.html.erb"></script>'
$('.result').html(msg);

msg变量包含一个呈现代码片段的脚本。 msg是动态变量。

以上代码无法将代码段插入div。

任何想法？

此脚本生成如下代码段。

enter image description here

Answer 1

要添加script，我会将其添加到head，就像这样;

var s = document.createElement('script');
s.src = 'https://gist.github.com/3010234.js?file=new.html.erb';
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);

Answer 2

function loadScript() {

    var script = document.createElement("script");
    script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
    script.type = "text/javascript";
    document.getElementsById("result").appendChild(script);

}

Answer 3

您无法使用该嵌入代码动态地将github gist加载到页面中。如果您可以将脚本标记添加到HTML中，嵌入代码就可以了，但是当您尝试通过JavaScript动态执行时，它将无效，因为它依赖于document.write()。

相反，请使用github gists api：

$.get("https://api.github.com/gists/3010234", function(response) {
    $(".result").text(response.data.files["new.html.erb"].content);
}, "jsonp");

工作演示： http://jsfiddle.net/naTqe/

Answer 4

看起来你的远程JS是错误的。我通过JS Lint运行它并发现了几个错误。

无论如何，这是我的工作范例。保持javascript控制台打开，当它试图解析远程JS时你会看到错误。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript" src=
  "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <title>Jquery test</title>
</head>

<body>
  <h1>jQuery</h1>

  <p class="result">Some result</p>
  <script>
  /*<![CDATA[*/
  $(document).ready(function(){
  var msg = '<script type="text/javascript" src="http://gist.github.com/3010234.js?file=new.html.erb"><\/script>";
  $('.result').html(msg);
  });
  /*]]>*/
  </script>
</body>
</html>

将代码段插入div

4 个答案: