创建 iframe 嵌入并使用模态

Creating iframe embeds and using modals

本文关键字：模态 iframe 创建      更新时间：2023-09-26

我工作的公司正试图提出他们自己的嵌入按钮版本。逻辑类似于Twitter和Facebook提供的逻辑。与Twitter不同，我们使用模态来打开新窗口。目前，我们有开发人员一个适合我们需求的模态库。

现在，我将解释我们遵循的过程：

  1. 我们的嵌入脚本将加载到用户的网站中。
  2. 它查找我们将提供给用户的链接，并将加载一个 iframe 来代替它。
  3. iframe 使用两个脚本 — jQuery 和我们的模态库。
  4. 单击iframe中的按钮时，模态应该打开，但它存在于我们的域中，并且应该在父窗口中打开。

根据我对形势的分析，我提出了以下问题：

  1. 我环顾了网络，但我有一种感觉，在父窗口中打开模态是不可能的。有解决方法吗？

  2. 为了防止点击劫持，我们将X-Frame-Options设置为 SAMEORIGIN .我们如何从我们的网站加载 iframe 中的内容？

  3. 如果我们跳过在 iframe 中加载按钮并修改父 DOM，我们可以使用我们的模态脚本，但是将我们自己的样式应用于按钮变得很痛苦，因为我们将对所有样式使用 important!。我们还剩下哪些其他选择？

要回答你的第一个问题，这并非不可能，因为我做了类似的事情，因此我认为它也应该解决你的第三个问题。

因此，在父页面上，您将有一个脚本，例如

function showModal(display) {
   var colorbox = $('#colorbox');
   var overlay = $('#cboxOverlay');
   if (display) {
     colorbox.fadeIn("medium"); 
   } else {
     colorbox.fadeOut("medium");
     overlay.fadeOut("medium");
   }
}

我使用过colorbox，但您可以使用自定义模态，我还使用了一个参数，因此您可以随意显示和隐藏它。

然后从你的 iframe 中，你可以使用这个脚本来调用你的模态

javascript: window.parent.showModal(true);

希望这有帮助。

1(你为什么不直接从iframe打开模态？如果从父窗口或子窗口调用它，则没有区别。

2( 使用 JSON-P

相关文章：