<script> tags getting stripped from output

Question

I am building a tumblr theme and have an ajax call that gets a video player, the video player code is returned and I log it out to the console (see #1). I write out the returned html to an element (#2) and then write out the contents of that element (#3) and the tags get parsed out.

Can anyone help me understand why the script tags are getting stripped and how I would get the script to run please?

console.log(data.posts[0]["video-player"]); //#1    
$("#DOMWindow .post-inner .video-container").html(data.posts[0]["video-player"]); //#2

$("#DOMWindow .post-inner .video-container").html(); //#3

Below is the output in the console for data.posts[0]["video-player"]

<span id="video_player_21019988413">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 10</a> is required to watch video.]</span><script type="text/javascript">renderVideo("video_player_21019988413",'http://penguinenglishlibrary.tumblr.com/video_file/21019988413/tumblr_m2f2kbQFzu1rsq78z',400,225,'poster=http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame1.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame2.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame3.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame4.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame5.jpg')</script>

Below is the output from the .html() call with the elements stripped #3

 <span id="video_player_21019988413">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 10</a> is required to watch video.]</span>"

Below is the full ajax call that should be inserting the script tags into the page but doesn't:

$.ajax({
    url: 'http://penguinenglishlibrary.tumblr.com/api/read/json?id=' + audioID,
    dataType: 'jsonp',
    timeout: 50000,
    success: function(data){
        var videoPlayer = data.posts[0]["video-player"];
        $("#DOMWindow").find(".post-inner .video-container").html(videoPlayer);

    }
});

Pointy · Accepted Answer · 2012-04-19 22:51:37Z

5

The jQuery .load() function always strips out <script> tags, and on top of that when you use the "context" variation as you are it does not execute them.

That is,

 $('#foo').load('http://what.ever.com/stuff .something', function() { /* ... */ });

That ".something" suffix after the URL triggers this weird "feature".

I logged a bug about this and the resolution was a documentation update. For various internal reasons it'd be pretty hard to make it work better.

edit — there's really no direct workaround other than to have your server do the work of separating out the page fragment you need. jQuery just won't cooperate, mostly (I think) because the library would have to somehow figure out what scripts from elsewhere in the retrieved page needed to be run.

edited Apr 19, 2012 at 22:51

answered Apr 19, 2012 at 22:45

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Burt Over a year ago

Thanks for answer, really appreciate the help. Could you please go into a bit more depth as I still don't really understand it? Could you maybe also please explain how I get around it or an alternative approach please?

Pointy Over a year ago

@Burt sure ... but the bottom line is that it just won't run your scripts.

Community · Accepted Answer · 2017-05-23 10:24:28Z

2

Pointy said

For various internal reasons it'd be pretty hard to make it work better.

The internal reasons are that assigning to a DOM node's innerHTML property does not execute script element's content.

Can scripts be inserted with innerHTML? explains.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Apr 19, 2012 at 22:59

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

1 Comment

Pointy Over a year ago

That's certainly true, but when you use .load() without the "context" suffix after the URL, then it does run the scripts. That is, the library itself pulls out all the <script> tags (the JavaScript <script> tags that the browser would execute if the content was loaded normally) and then, after updating the content, it explicitly runs the code in each one of them. In the case of the suffixed URL variation on .load(), however, that does not happen.

Collectives™ on Stack Overflow

<script> tags getting stripped from output

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related