javascript in iframe not working when updating iframe with jquery

Question

Hi and thanks for taking the time to look at this for me, ok here is my problem.

I use the ebay api to get listings and orders from ebay and store them in my database, I am currently making the script to edit the description of my listings and I have a standard textarea that gets the description from my database, I also have a tab called preview, this gets the content of the textarea and moves it to an iframe using jquery.

The problem is that the ebay description has some javascript and when I use jquery to update the iframe the javascript does not work in the iframe, if I swap out the iframe for a div and tweek the jquery to move the contents from the textarea to the div it all works fine, but the css in the description is messing with the site design, hence the use of an iframe.

Below is some of the code from the description, shortened for clarity

<div id="tabs" class="listingTabs">
    <a href="javascript:SwitchFrame(1)" class="tabs" title="tab 1" id="tab-01">tab 1</a>
    <a href="javascript:SwitchFrame(2)" class="tabs" title="tab 2" id="tab-02">tab 2</a>
    <a href="javascript:SwitchFrame(3)" class="tabs" title="tab 3" id="tab-03">tab 3</a>
    <a href="javascript:SwitchFrame(4)" class="tabs" title="tab 4" id="tab-04">tab 4</a>
</div>

<div class="tab-content" id="tc-01">
    <p>Content 1</p>
</div>

<div class="tab-content" id="tc-02" style="display: none;">
    <p>Content 2</p>
</div>

<div class="tab-content" id="tc-03" style="display: none;">
    <p>Content 3</p>
</div>

<div class="tab-content" id="tc-04" style="display: none;">
    <p>Content 4</p>
</div>

<script type="text/javascript">

function SwitchFrame(FrameID) {
    var FrameIndex = 1;
    for (FrameIndex=1;FrameIndex<=4;FrameIndex=FrameIndex+1)
        {
            if (FrameIndex != FrameID) {
                document.getElementById("tc-0" + FrameIndex).style.display="none";
                document.getElementById("tab-0" + FrameIndex).className="tabs";
            } else {
                document.getElementById("tc-0" + FrameIndex).style.display="block";
                document.getElementById("tab-0" + FrameIndex).className="tabs tab-selected";
            }
        }
    }

SwitchFrame(1);

</script>

My Jquery code to update the iframe is

jQuery(document).ready(function(){

/**************************************************************************
******** Load the description into the iframe
**************************************************************************/

$('#DescriptionPreviewIframe').load(function(){     

    // get the EbayListings_Description content from the textarea
    var Description = $('textarea#EbayListings_Description').val();

    // parse the html (for javascript)
    var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), document, true));

    // now update the DescriptionPreviewIframe div      
    $('#DescriptionPreviewIframe').contents().find('body').html(DescriptionParsed);

    }); // end DescriptionPreviewIframe load function

}); // end document ready function

as soon as I refresh the page it and look in console I get the error "VM2767:11 Uncaught TypeError: Cannot read property 'style' of nulll" and for the javascript line that has the error it is "document.getElementById("tc-0" + FrameIndex).style.display="block";" which is in the code I listed above.

Also when I look at the content of the iframe via developer tools in chrome there is no sign of the javascript being moved over? all the html is there but no javascript, yet it still manages to throw the error, however when I click the error it shows me all the javascript but it seems to be in a different file all on its own, which would explain why the error is being thrown.

Can anyone help as to why this is happening and if possible a solution.

Kind regards

Wayne

Answer 1

My first thought was that this line:

var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), document, true));

should have been

var DescriptionParsed = $($.parseHTML($('textarea#EbayListings_Description').val(), $('#DescriptionPreviewIframe').get(0).contentDocument, true));

since the HTML should be parsed in the context of the iframe. But this does not appear to change anything. Maybe I'm doing something wrong, but it seems that if the <script> is parsed by code running in the context of the parent, the <script> will itself run in the context of the parent.

The alternative is to define the function that invokes the parsing in the iframe:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function loadMe(html)
{
    $('body').append($($.parseHTML(html, document, true)));
}
</script>

Then invoke it from the main page:

jQuery(document).ready(function(){

/**************************************************************************
******** Load the description into the iframe
**************************************************************************/

$('#DescriptionPreviewIframe').load(function(){     

    // get the EbayListings_Description content from the textarea
    var Description = $('textarea#EbayListings_Description').val();

    this.contentWindow.loadMe(Description);

    }); // end DescriptionPreviewIframe load function

}); // end document ready function