Why does javascript strip out my dyamically javascript?

Question

I have a javaScript that calls a function:

var combineddata = jQueryGetHtml();

The function is:

// Get ALL of the HTML using jQuery
var jQueryGetHtml = function()
{
    var htmlStartTag = function()
    {
        return $('html').contents();

        var attrs = $('html')[0].attributes;
        var result = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html';
        $.each(attrs, function() { 
            result += ' ' + this.name + '="' + this.value + '"';
        });
        result += '>';
        return result;
    }

    return htmlStartTag() + $('html').html() + '</html>';
}

This works great except that it strips out inline javascript such as:

<script type="text/javascript">
var addthis_config = {"data_track_clickback":true, "ui_click":false};
</script>

Another problem: This div

<div id="Pc8od0kc" class="reusable-block">
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=somebody" class="addthis_button">
        <img width="125" height="16" style="border: 0pt none;" alt="Bookmark and Share" src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif">
    </a>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true, "ui_click":false};</script>
    <script src="http://s7.addthis.com/js/250/addthis_widget.js#username=claremontmc" type="text/javascript"></script>
</div>

becomes

<div id="Pc8od0kc" class="reusable-block">
    <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=somebody">
        <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none;" height="16" width="125">
    </a>
</div>

Your question doesn't seem to be complete, just letting you know! — Chetan, Oct 09 '10 at 00:21
@Chetan: SO will automatically remove HTML that is not considered safe to use. The remaining portions of his post should be there now (in code tags). — eldarerathis, Oct 09 '10 at 00:22
Your function htmlStartTag has two return statements, one of which is never reached. — seth, Oct 09 '10 at 00:52

score 1 · Answer 1 · answered Oct 09 '10 at 00:52

1

The html() getter will not remove script content. If you don't get <script> from html(), then it's because there was no <script> tag in the DOM at the time it was called.

If you are writing to that element with the html(value) setter, and then later reading it back, then that will cause the <script>s to get stripped. jQuery deliberately strips <script> tags from input (amongst other nasty things it does to incoming markup using some really misguided regex hacking), and tries to run the code inside them manually on insertion.

This is because if you simply write a <script> to innerHTML, browser will not execute that script. However, if you then do DOM manipulations on the resulting DOM nodes, browsers will sometimes execute the script, but at different times, causing undesirable cross-browser inconsistency.

What is your aim, why do you need to write and then retrieve <script> elements? It's almost never a good idea to write <script> into a document via html() or innerHTML.

answered Oct 09 '10 at 00:52

bobince

528,062
107
651
834

Thanks everyone for your help! The software I'm building allows users to toggle through pre-fabricated HTML content that they can put onto a page preview. The page preview is then saved and written to the server. Users can go back at any time and make changes. Some of the pre-fab HTML has – Oct 11 '10 at 15:21
Sounds like you need to keep the original HTML input in a plain variable or hidden input, and submit that, rather than trying to read it back from the `html()` of a preview element. Using the `html()` result is also undesirable because you will be getting a browser's HTML serialisation of the DOM content, which probably won't be as nicely-formatted as the original (attributes will be re-ordered; details of attribute quoting and whitespace won't be preserved; element names will be case-folded; entity references may not be used; and IE can even generate invalid HTML). – bobince Oct 11 '10 at 23:41

score 0 · Answer 2 · answered Oct 09 '10 at 01:24

0

Use jQuery.getScript() to get scripts and execute them on the page. If you don't know what scripts you are going to be executing and you are just grabbing HTML and executing those scripts dependently, you have a tremendous design problem.

answered Oct 09 '10 at 01:24

Explosion Pills

188,624
52
326
405

Why does javascript strip out my dyamically javascript?

2 Answers2