使 iFrame 更易于使用

Making iFrames More Usable

本文关键字：易于使 iFrame      更新时间：2023-09-26

所以我的一个客户已经与一家票务公司签约，该公司说服他们采用一种解决方案，该解决方案基本上通过iframe将他们的系统嵌入到我客户的网站上。育。

这意味着在我的客户的事件页面上，他们将浏览 iframe 中的事件，父级的 URL 永远不会更改。

我

只是想知道我是否可以做些什么来减少该特定问题。 例如，在 iframe 中的每个页面加载中，向父级的 url 发送一些内容，以标识 iframe 的哪个页面当前处于打开状态？这样，如果有人共享 url 或通过浏览器刷新，他们就不会回到 iframe 的起始页。

我

可能会将自己的JavaScript文件添加到iframe中，不确定我还能操作多少iframe。

任何建议都会很棒。

谢谢！

你可以监听 iframe 的 onLoad-event 并获取里面页面的当前 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。

您存储什么以及如何存储和反应取决于您。我不知道您的页面和框架内的页面究竟是如何工作的。最后的步骤只是提供一种可能性的示例。我希望你能在此基础上再接再厉。

相关文章：