create content dynamically with JS from external PHP file

Question

I'm trying to create a popup window with quite a bit of content, so I've put the content into a separate .php file and I use the following javascript to get the effect I want:

$('#popup').show();
var u = $("#username").html();
$('#popup').html('<iframe src="content.php?u='+u+'"></iframe>');

This works well, except that I have a close function for when the user hits the escape key:

$(document).keyup(function(e) {
  if (e.keyCode == 27) { 
    $('#popup').hide().html('');
    } 
});

My problem is that once the popup opens, and the user clicks within the iframe, the escape button no longer closes the window because I'm using the iframe.

Is there a better way in Javascript to include an external php file dynamically like this, or is there a way I can make the escape button function work even if the iframe has been clicked within?

Answer 1

You can use jQuery's .load():

$('#popup').load('somefile.php');

Answer 2

Its not advisable to use iframe, use ajax. If you still want to use iframe then you have to store the popup in top, e.g. add below code in main php file

top.popup = $('#popup');
top.popup.show();
var u = $("#username").html();
top.popup.html('<iframe src="content.php?u='+u+'"></iframe>');

And below code in main php and content.php

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        top.popup.hide().html('');
    }
});