使用Javascript动态插入Javascript？

Question

我正在尝试使用JavaScript动态插入一组包含JavaScript代码的脚本标签。我基本上是想用jwplayer包装一个文件，但是脚本字符串正在破坏页面中其余的JavaScript代码。我应该如何正确地执行此操作？

引起问题的行：

        $file_link_insert = "<script   type='text/javascript'>jwplayer('mediaplayer').setup({flashplayer: 'player.swf', file: '"+$href+"'});</script>";

以下是参考资料的其他功能:

$(".file_link").live("click", function(e){
                e.preventDefault();
                var $href = $(this).attr("rel");
                // Dialog           
                $('#filelink').dialog({
                    autoOpen: true,
                    width: 300,
                    modal: true,
                    buttons: {
                        "Ok": function() {
                            if($("input[name=file_link_text]").val()!=""){

                                $file_type = fileType($href);//determine if its video file see function below.

                                if($file_type == 'vid'){

                                   $file_link_insert = "<script type='text/javascript'>jwplayer('mediaplayer').setup({flashplayer: 'player.swf', file: '"+$href+"'});</script>";

                                  // $file_link_insert = " <p><a href=\""+$href+"\">"+$("input[name=file_link_text]").val()+"</a></p> ";

                                }else { $file_link_insert = " <p><a href=\""+$href+"\">"+$("input[name=file_link_text]").val()+"</a></p> "; }

                                $("#_tinyMCEinit_ifr").contents().find("body").append($file_link_insert);
                                $("#content_editor ul li:first a").click();
                                $(this).dialog("close"); 
                                $("input[name=file_link_text]").val("");
                                } else { alert("You must enter text label for your link!"); }
                            },
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                            }
                        }
                }); 
            });

- user794846

---

为什么你不在if块内直接调用这行代码呢？ - Mikhas

问题在于 </script> 实际上会过早地结束 js。 - Jørgen R

这实际上是一个重复的问题，参考 jQuery: Can't append <script> element。 - Jørgen R

Answer 1

您不能在JavaScript中包含</script>，因为浏览器会将其解释为脚本的结束。只需分割或转义字符串即可，例如：<\/script>

请参见使用document.write()写入<script>标记时为什么要拆分它？

- Sam Greenhalgh

---

不需要使用字符串连接，只需使用简单的JavaScript转义序列并编写<\/script>。 - Mathias Bynens

是的，任何不是 </script> 的内容。 - Sam Greenhalgh

Answer 2

我认为正确的方法是使用DOM动态加载Javascript，并将其附加到任何你想要的地方：

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = "myScript.js";
$("head").append( script );

在这种情况下追加到头标签中，你可以将 script.src 更改为 script.text 以用于内联脚本。

- sysop

---

设置 script.type 是不必要的。 - Mathias Bynens

也许我想要"application/javascript"或"text/jscript"或"text/ecmascript"，我们有11种脚本类型！如何区分呢？ - sysop

在这些情况下，您将设置 .type。但由于我们在这里追求的是 text/javascript，我不认为它会增加任何价值。 - Mathias Bynens

我之前通过使用</scr"+"ipt>让它工作了，但现在它无法附加到$("#_tinyMCEinit_ifr").contents().find("body").append($file_link_insert);上，它说jwplayer未定义。有什么想法吗？ - user794846

Answer 3

这是错误的：

$file_link_insert = "<script type='text/javascript'>jwplayer('mediaplayer').setup({flashplayer: 'player.swf', file: '"+$href+"'});</script>";

你需要在这里转义</script>，否则它会关闭<script>元素。使用简单的JavaScript转义序列，例如<\/script>：

$file_link_insert = "<script>jwplayer('mediaplayer').setup({flashplayer: 'player.swf', file: '"+$href+"'});<\/script>";

- Mathias Bynens

---

这个可以工作，但现在我有一个新问题，jwplayer没有像我预期的那样插入到tincymce中。 - user794846

Answer 4

你需要通过DOM API创建脚本标签。 document.createElement("script");

- designerrr