logo标签列表

将代码段插入到div中

javascriptjqueryhtml
4
我使用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

你是如何调用代码的？文档准备好了吗？ - BryanH
2
你为什么在 div 标签内嵌套 script 标签？ - Kshitij
你的目的是什么，执行脚本还是只是显示它？ - James
4个回答
3
要添加 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);
在这种情况下不行。将一个脚本添加到头部以输出显示代码是行不通的，对吧？ - BryanH
@BryanH：我知道，只是发了一个常见的方法。不过在那种情况下，document.getElementById('id')就可以解决问题了 :) - Blaster
var script = document.createElement("script"); script.src = "https://gist.github.com/3010234.js?file=new.html.erb"; script.type = "text/javascript"; document.getElementById('aaa').appendChild(script);此代码插入了一个脚本，但没有呈现任何代码片段。 - Shamith c
1
@Shamithc：由于它是动态添加的，因此在浏览器中查看源代码选项时不会显示。 - Blaster
1
function loadScript() {
    var script = document.createElement("script");
    script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
    script.type = "text/javascript";
    document.getElementById("result").appendChild(script);
}
1
在HTML中没有标签名为result的元素 :) - Blaster
@Blaster，你说得对，我已经更新了。最好将它包含在头标签中。 - Talha
1
将 getElementsByID 更改为 getElementById :) - Blaster
既然OP正在使用jQuery，为什么不继续使用它呢？jQuery的选择器比getElementById更容易（也更安全）。 - BryanH
@BryanH，这很简单，我同意。但是你怎么能说它更安全呢？ - Talha
1

使用嵌入代码无法动态将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/

正如在另一个SO问题中所看到的。 - BryanH
$.getScript("https://gist.github.com/3010234.js?file=new.html.erb"); 是可以工作的。但是我无法将脚本生成的代码片段呈现到 div 中。 - Shamith c
@Shamithc - 你正在尝试加载的脚本使用了document.write()，在文档完成加载后不应该使用它。 - gilly3
@Shamithc - 我已经放弃了我之前的答案，因为虽然在技术上是正确的，但它涉及一个红鲱鱼问题，并且无法让您更接近实现您的实际目标，即使用JavaScript动态地将github gist加载到页面中。请参见我上面的新答案以获得可行的解决方案。 - gilly3
是的，你说得对。但我错过了要点的样式，我需要从脚本本身生成代码。你只是试图获取内容。 - Shamith c
0

看起来你的远程 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接