Dynamically insert javascript using Javascript?

Question

I am trying to dynamically insert a set of script tags with some javascript code in it using javascript. I am basically trying to wrap a file in jwplayer, but the script string is breaking rest of the javascript code in the page. How do I do this correctly?

the line causing the problem:

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

Rest of function for ref:

$(".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"); 
                            }
                        }
                }); 
            });

The problem is that the `` actually ends the js prematurely. — Jørgen R, Feb 13 '12 at 11:36

score 4 · Accepted Answer · edited May 23 '17 at 12:20

4

You can't include </script> within a javascript because the browser will interpret it as the end of the script. Simply break up or escape the string. like this <\/script>

See Why split the <script> tag when writing it with document.write()?

edited May 23 '17 at 12:20

Community

1
1

answered Feb 13 '12 at 11:51

Sam Greenhalgh

5,952
21
37

[There’s no need to use string concatenation](http://mathiasbynens.be/notes/etago); just use a simple JavaScript escape sequence and write `<\/script>`. – Mathias Bynens Feb 13 '12 at 11:56
Yep, anything that's not `` – Sam Greenhalgh Feb 13 '12 at 11:58

sysop · Answer 2 · 2012-02-13T12:09:18.637

2

I think the proper way is to use DOM and dynamically load Javascript and append it anywhere you wish:

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

Appended into head tag in this case, you can change the script.src to script.text for inline scripts.

edited Feb 13 '12 at 12:09

answered Feb 13 '12 at 11:45

sysop

800
2
9
18

1

[Setting `script.type` is unnecessary.](http://mathiasbynens.be/notes/async-analytics-snippet#type) – Mathias Bynens Feb 13 '12 at 11:55
1

Maybe I want "application/javascript" or "text/jscript" or "text/ecmascript", we have 11 types for scripting! how to distinguish? – sysop Feb 13 '12 at 12:02
In those cases you would set the `.type`. But since `text/javascript` is what we’re after here, I don’t see how it adds any value. – Mathias Bynens Feb 13 '12 at 12:09
I got it working simply by but now its failing to append on $("#_tinyMCEinit_ifr").contents().find("body").append($file_link_insert); its saying jwplayer is not defined Any ideas? – user794846 Feb 13 '12 at 12:44

score 1 · Answer 3 · answered Feb 13 '12 at 11:52

1

This is wrong:

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

You need to escape </script> here or it will close the <script> element. Use a simple JavaScript escape sequence, e.g. <\/script>:

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

answered Feb 13 '12 at 11:52

Mathias Bynens

144,855
52
216
248

This works but now I have a new problem that jwplayer is not inserted into tincymce as I expected. – user794846 Feb 13 '12 at 11:55

score 0 · Answer 4 · answered Feb 13 '12 at 11:40

0

You need create script tag through DOM API. document.createElement("script");

answered Feb 13 '12 at 11:40

designerrr

222
1
2
8

Dynamically insert javascript using Javascript?

4 Answers4