Jquery .Ready in a Dynamically Inserted Iframe

jQuery .ready in a dynamically inserted iframe

I answered a similar question (see Javascript callback when IFRAME is finished loading?).
You can obtain control over the iframe load event with the following code:

function callIframe(url, callback) {
    $(document.body).append('<IFRAME id="myId" ...>');
    $('iframe#myId').attr('src', url);

    $('iframe#myId').load(function() {
        callback(this);
    });
}

In dealing with iframes I found good enough to use load event instead of document ready event.

Dynamically Adding HTML into an iFrame - Javascript

check out this post:
addEventListener to iFrame

you need to use
$('#myIFrame').load(function(){
....

How can I use jQuery to dynamically load html into an iFrame?

You don't try to copy the form to a hidden iframe, you submit the form to the hidden iframe. Set the target attribute (or property) of the form to the name of the iframe.

var fileForm = $('#attachFile form').prop('target', 'hiddenIframe');
$('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame"></iframe>');

or

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
</form>

Check if dynamically added element is ready

I put this code into iframe

$(document).ready(function() {
window.parent.postMessage('load complete', 'http://jahsdjhasjkdasdjkas.com');
});

and this into main page

window.addEventListener('message', receiveMessage, false);
function loadinghide(){
$('#loading').fadeOut();
};

function receiveMessage(evt)
{
  if (evt.origin === 'ajhsdjashdjkasdas.com')
  {
    loadinghide();
  }
}

Html of a webpage dynamically inserted into iframe looks slightly different from original page

Some default settings like margins and paddings differ between quirks and standards mode.

So make sure that The DOCTYPE declaration is the same as the original.

Or more formally, if the original page has any DOCTYPE declaration that triggers standards mode, the source in your iframe needs to have a DOCTYPE like that as well. (Doesn't have to be identical, as long as they trigger the same mode.)

---

Related Topics