Access element within iframe that is inside jQuery UI dialog

Question

HTML is pretty simple, on my page I have

<div id="notificationDialog" title="View Notification"></div>

I dynamically load notifications based on the user viewing the page, and display them inside an iframe, which is inside a jQuery ui dialog. Basically,

function viewNotif(nid) {
  var wWidth       = jQuery(window).width();
  var dWidth       = wWidth * 0.5;
  var $notifIframe = jQuery('<iframe />', {
      name: 'myFrame',
      id:   'myFrame',
      src: "/modals/modal_notification.php?nid="+nid,
      width:"100%",
      height:"100%",
      align:"center",
      scrolling:"auto",
      frameborder:"0"
  }); 

  jQuery('#notificationDialog').html($notifIframe.clone());

  jQuery('#notificationDialog').dialog({
      autoOpen: false,
      height: auto,
      width: dWidth,
      modal: true
  });

  jQuery('#notificationDialog').dialog('open');
}

I am trying to access the height value of a div that is within the iframe inside the jQuery ui dialog, and have thus far been unable to do so. How would I get the height value of a div, id of the div is notification_container which is inside the iframe, inside notificationDialog?

EDIT - I should mention that the function is called in an onClick one the page, and passes the notification ID (nid) to display, to the function.

BenR · Accepted Answer · 2013-09-12 16:31:13Z

3

$("iframe").contents().find("#selector");

It should be noted that this is only allowable if the iframe contents are accessed locally. Otherwise you'll get an access denied error.

edited Sep 12, 2013 at 16:31

answered Jun 12, 2012 at 17:57

BenR

2,9453 gold badges29 silver badges39 bronze badges

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

3 Comments

Mike Over a year ago

This gives me this error Uncaught TypeError: Object #<HTMLIFrameElement> has no method 'contents'

Mike Over a year ago

The iframe is on the same server as the page, but in a different folder. Is that not 'local'?

Karl White Over a year ago

I know this is an old question, but in case anyone stumbles upon it, the line above should be as follows: $("iframe").contents().find("#selector"); (i.e. without the [0])

Collectives™ on Stack Overflow

Access element within iframe that is inside jQuery UI dialog

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related