Calling function in dynamically created iFrame, from button in jQuery UI dialog

Question

Summary:

Using jQuery UI dialogs and a dynamically created iFrame, is it possible to call a function inside the iFrame from one of the buttons defined in the .dialog

Details:

I'm only just starting to cut my teeth with jQuery and jQuery UI, and I am trying to convert an existing application over to using the .dialog functionality.

The previous plugin that I was using for "inline popup windows" was good, but jQuery cannot co-exist with it as they both use the $() method. I am aware you can avoid conflicts with other libraries, but I thought it was easier to move over to jQuery lock-stock-and-barrel, rather than make them co-exist.

The advantage of the previous plugin was the ability to specify the content of the popup to be either an existing <div> on the page, direct HTML code or (most importantly to me) the URL to a different page.

This answer really helped me get the last of those abilities working, and this is what I currently have...

$(document).ready(function () {
  var iframe = $('<iframe id="myFrame" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>');
  var dialog = $('<div id="myDiv"></div>').append(iframe).appendTo("body").dialog({
    autoOpen: false,
    modal: true,
    resizable: true,
    width: 600,
    height: 600,
    title: "My Popup",
    close: function () {
      iframe.attr("src", "");
    },
    buttons: [{ text: "Call iFrame Function",
                click: function () { alert($("#myFrame").contentWindow); }
              },
              { text: "Close Popup",
                click: function () { $("#myDiv").dialog("close"); }
              }]
  });
  iframe.attr({ src: "SubPage.html" });
  dialog.dialog("open");
});

What I cannot work out is...

How can I run javascript in the iFrame that has been created dynamically by the jQuery, via a button click??

Why is the .contentWindow in $("#myFrame").contentWindow always undefined? (I can confirm that $("#myFrame") returns the iframe in question.)

Thanks @Arpit but I don't understand how I call a function... for instance if I have function doThis() { alert("hello"); } in the page within the iFrame, how would I call doThis()? — freefaller
– freefaller, Commented Jan 28, 2014 at 18:28
Sorry all, I have to leave for the next 2 hours... I will respond to comments/answers ASAP — freefaller
– freefaller, Commented Jan 28, 2014 at 18:32
well i have not tried it before but try something like window.frames['frameName'].doThis(); — Arpit
– Arpit, Commented Jan 28, 2014 at 18:33

swornabsent · Accepted Answer · 2014-01-28 19:26:08Z

2

Edit: The reason $("#myFrame").contentWindow is undefined is that the jQuery object consisting of the iframe element does not have a contentWindow property. You need to get(0) on it to get the actual window element, on which you can call Javascript functions defined in that namespace.

$("#myFrame").get(0).contentWindow.myFunction(args);

To traverse and manipulate its DOM, use this to get your iframe's content document:

var framedoc = $("#myFrame").get(0).contentDocument || $("#myFrame").get(0).contentWindow.document;

Then you should be able to manipulate it like a normal document, e.g.

$(framedoc).find("input#whatever").val(myInput).closest("form").submit()

Or whatever it is you're wanting to trigger.

edited Jan 28, 2014 at 19:26

answered Jan 28, 2014 at 19:13

swornabsent

1,0041 gold badge8 silver badges14 bronze badges

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

1 Comment

freefaller Over a year ago

Ah, that makes sense, still trying to get my head around jquery. Will try in the morning (checking this via my phone before heading to bed in the UK)

Collectives™ on Stack Overflow

Calling function in dynamically created iFrame, from button in jQuery UI dialog

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related