时间戳

首页 > 解决方案 > 如何检测外框是否已经加载到单页应用程序中？

javascript - 如何检测外框是否已经加载到单页应用程序中？

问题描述

我正在创建一个包含 3 个部分的单页 Web 应用程序：

标题和侧边栏不应在第一页加载后重新加载 - 只有 i-frame。我正在使用 History API（即 pushstate）来处理历史记录和导航。

我遇到的问题是，如果有人直接在网站中的任何页面输入 url，我想加载标题和侧边栏，然后加载他们在 i-frame 中访问的页面。如果他们已经在页面上并且他们单击指向不同页面的链接，我只希望它在 i-frame 中加载新页面。我也想在不弄乱导航历史的情况下做到这一点。

如何检测到这一点并正确加载内容？

标签： javascriptphpajaxiissingle-page-application

解决方案

在 iframe 中，您将使用一小段 Javascript 来查看window.parent和window.top ，如下所示：

iframe 中的 JavaScript

if (window.parent == window.top) {
  // user loaded the iframe, go to parent 
  window.location = "<your parent url>" + "?iframe=" + window.location;
}

然后在父级加载由 指示的 iframe $_GET['inframe']：

父级中的 PHP

if (isset($_GET['inframe']) {
   loadIframe($_GET['inframe']);
}

我在哪里编写了一个loadIframe()函数，因为你没有提供任何代码，所以你必须用你自己的代码替换它。

出于安全原因，您可能希望使用filter_input()过滤输入：

父级中的 PHP

if (isset($_GET['inframe']) {
   loadIframe(filter_input(INPUT_GET, 'inframe'], FILTER_VALIDATE_URL);
}

并进行进一步检查。通过这种方式，您可以防止人们使用该iframe参数在您的代码中注入恶意内容，或者仅加载他们喜欢的任何 iframe。

您可以使用 AJAX 来代替 iframe 来加载内容，并完全避免这个问题。然而，iframe 允许以更传统的方式加载内容。

推荐阅读