tags:

views:

54

answers:

2
Q: 

Why does javascript strip out my dyamically javascript?

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"&gt;&lt;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;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"&gt;
    </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;amp;username=somebody"&gt;
        <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>
+1  A: 

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.

bobince  2010-10-09 00:52:46
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 <script> because it is a dynamic content block, e.g. the addthis block I listed above.When I saved the content, the HTML returned was missing parts of the original script. Also, I had a script URL that was moved to the header of the DOM.I will continue testing with your ideas.BBS
syn4k  2010-10-11 15:21:27
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  2010-10-11 23:41:25
A: 

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.

tandu  2010-10-09 01:24:58

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?