2

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.)

Community
  • 1
  • 1
freefaller
  • 19,368
  • 7
  • 57
  • 87
  • try using $("#myFrame").contents().find("") – Arpit Jan 28 '14 at 18:21
  • 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 Jan 28 '14 at 18:28
  • Sorry all, I have to leave for the next 2 hours... I will respond to comments/answers ASAP – freefaller Jan 28 '14 at 18:32
  • well i have not tried it before but try something like window.frames['frameName'].doThis(); – Arpit Jan 28 '14 at 18:33

1 Answers1

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.

swornabsent
  • 984
  • 1
  • 7
  • 14
  • 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) – freefaller Jan 28 '14 at 22:59