Javascript。使用 getElementById 将脚本放入 div答案

【问题标题】：Javascript. put script in div using getElementByIdJavascript。使用 getElementById 将脚本放入 div
【发布时间】：2012-03-03 14:57:48
【问题描述】：

简单地说，当用户单击“480p”之类的 javascript 文本时，我希望该文本激活 Javascript 函数，该函数只需将视频播放器的脚本放入 div 中，然后加载另一个不同质量的视频.

YouTube 就是一个很好的例子。回到 YouTube 还年轻的时候，如果你想改变质量，那么播放器就会被重置。

在我的 Javascript 函数中，我有 document.getElementById('videoplayer').innerHTML="<script language=\"JavaScript\">flowplayer(\"player\", \"swf location\", {clip:{data}}); </scr"+"ipt>";

当我这样做时，它会用我的数据覆盖 div，但脚本不会在 div 中播放/激活，这将使用新流重新加载视频播放器

有什么建议吗？

【问题讨论】：

页面加载后用脚本填充div不会触发脚本运行。
@cale_b 你猜我会怎么做？我从那些说他们已经做过的人那里看到了“createelement”、“setattribute”等。

标签： javascript dom-events video-streaming innerhtml video-processing

【解决方案1】：

为什么不使用 createElement 代替？

<html>
<head>
<script type="text/javascript">
function doit() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.innerHTML = "flowplayer(\"player\", \"swf location\", {clip:{data}});";
  document.getElementById('videoplayer').appendChild(script);
}
</script>
</head>
<body>
<div id="videoplayer">...</div>
<input type="button" value="doit" onclick="doit()" />
</body>
</html>

【讨论】：

快速提问。 var script = document.createElement("script"); 哪里有“脚本”，引用的是什么？外部 .js 文件？

【解决方案2】：

既然你已经在执行 javascript 来修改 DOM，为什么不直接调用那个函数呢？

代替

document.getElementById('videoplayer').innerHTML="<script language=\"JavaScript\">flowplayer(\"player\", \"swf location\", {clip:{data}}); </scr"+"ipt>";

只是做

flowplayer("player", "swf location", {clip:{data}});

【讨论】：

这通常可以工作，但 flowplayer 也可以通过使用 href 填充具有指定 ID 和指定文件位置的锚标记来工作。因此，即使我确实调用了 flowplayer 函数，它也会引用锚标记内的静态文件位置。

【解决方案3】：

当您需要在 DIV 中生成 AJAX 答案时，请使用 eval() 并且不要忘记并非所有浏览器都支持 createElement

【讨论】：

您指的是哪些浏览器？见：quirksmode.org/dom/w3c_core.html#t00
W3C DOM Level 2 HTML 为 select element object 定义了一个 add 方法，但没有为 options 集合定义一个 add 方法。但是使用该方法很困难，因为 IE 实现了具有不同参数的同名方法。
see this