使用外部PHP文件中的JS动态创建内容

Question

我尝试创建一个包含相当多内容的弹出窗口，因此我将内容放入单独的.php文件中，并使用以下javascript来获得我想要的效果：< / p>

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

这很有效，除了我在用户点击转义键时有一个关闭函数：

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

我的问题是，一旦弹出窗口打开，并且用户在iframe中点击，退出按钮就不会关闭窗口，因为我使用的是iframe。

有没有更好的方法在Javascript中动态包含外部php文件，或者有一种方法可以使转义按钮功能正常工作，即使iframe已经被点击了吗？

Answer 1

您可以使用jQuery的.load()：

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

Answer 2

不建议使用iframe，请使用ajax。如果您仍想使用iframe，则必须将popup存储在top中，例如在主php文件中添加以下代码

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

主要php和content.php

中的代码

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