javascript - 使 iFrame 更有用

Question

因此，我的一个客户与一家票务公司签约，这家票务公司说服他们采用一种基本上通过 iframe 将他们的系统嵌入我客户网站的解决方案。嗯。

这意味着在我客户的事件页面上，他们将通过 iframe 中的事件进行导航，而父级的 url 永远不会改变。

我只是想知道我是否可以做些什么来使这个特定问题变得不那么严重。例如。在 iframe 中加载的每个页面上，向父级的 url 发送一些内容，以标识当前打开的 iframe 页面？这样，如果有人共享 url 或通过浏览器刷新，他们就不会留在 iframe 的起始页面。

我可能可以将自己的 javascript 文件添加到 iframe，但不确定我还能对 iframe 进行多少操作。

任何建议都会很棒。

谢谢!

Answer 1

您可以监听 iframe 的 onLoad 事件并获取内部页面的当前 URL。

var iframe = document.getElementById("myframe"); // That's our iframe
iframe.addEventListener("load", function() {
  var currentURL = iframe.contentDocument.URL; // The current URL of the page inside the iframe
});

然后您可以使用此 URL 执行您需要的操作。您还可以使用 window.history 更改浏览器 URL 栏中的 URL。

// Inside the onLoad-event of the iframe
window.history.pushState({}, "", "?framepage=" + currentURL.split("/").pop());

这将在用户每次更改 iframe 内的位置时更改 URL，或者更准确地说，它添加了一个 URL 参数。假设用户导航到 http://example.com/somepage/whatever.html 。浏览器中的 URL 将具有 URL 参数 ?framepage=whatever.html。您现在可以让页面在第一次加载时加载此 URL 参数中提供的页面，以便人们可以共享这些链接，并且 iframe 最初具有正确的 src。

您存储什么以及如何存储和对其使用react取决于您。我不知道你的页面和框架内的页面究竟是如何工作的。最后的步骤只是提供一种可能性的示例。我希望你能以此为基础。