使用 JS 从外部 PHP 文件动态创建内容答案

【问题标题】：create content dynamically with JS from external PHP file使用 JS 从外部 PHP 文件动态创建内容
【发布时间】：2014-05-11 20:07:25
【问题描述】：

我正在尝试创建一个包含大量内容的弹出窗口，因此我将内容放入一个单独的 .php 文件中，并使用以下 javascript 来获得我想要的效果：

$('#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 已被点击？

【问题讨论】：

【解决方案1】：

你可以使用jQuery的.load():

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

【讨论】：

【解决方案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('');
    }
});

【讨论】：