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

No it is on the same domain, in this case the localhost on my machine and then it is moved to the server when ready, also the page for the iframe is just a blank page. — bbunlock
– bbunlock, Commented Apr 23, 2015 at 20:03

radiaph · Accepted Answer · 2015-04-23 20:33:57Z

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

answered Apr 23, 2015 at 20:33

radiaph

4,1711 gold badge18 silver badges20 bronze badges

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

1 Comment

bbunlock Over a year ago

@ phari thank you so much it worked perfectly first time, I have been at this problem for 3 days and it was driving me mad, thank you very much

Collectives™ on Stack Overflow

javascript in iframe not working when updating iframe with jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related