Question

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

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

我们的嵌入脚本将加载到用户的网站上。
它会查找我们将提供给用户的链接，并会加载iframe代替它。
iframe使用两个脚本 - jQuery和我们的模态库。
单击iframe内部的按钮时，模式应该打开但它存在于我们的域中，它应该在父窗口中打开。

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

我环顾网络，但我觉得在父窗口内打开一个模态是不可能的。有解决方法吗？
为了防止点击劫持，我们将X-Frame-Options设置为SAMEORIGIN。我们如何从我们的网站加载iframe中的内容？
如果我们跳过加载iframe中的按钮并修改父DOM，我们可以使用我们的模态脚本，但是将我们自己的样式应用到按钮会变得很麻烦，因为我们将important!用于各种风格。我们还有哪些其他选择？

Answer 1

1）为什么不从iframe打开模态？如果从父窗口或子窗口调用它，它将没有任何区别。

2）使用JSON-P

Answer 2

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

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

function showModal(display) {
   var colorbox = $('#colorbox');
   var overlay = $('#cboxOverlay');

   if (display) {
     colorbox.fadeIn("medium"); 
   } else {
     colorbox.fadeOut("medium");
     overlay.fadeOut("medium");
   }
}

我使用过彩盒，但你可以使用自定义模式，我也使用了一个参数，这样你就可以随意显示和隐藏它。

然后，从您的iframe中，您可以使用此脚本调用您的模态

javascript: window.parent.showModal(true);

希望这有帮助。

创建iframe嵌入和使用模态

2 个答案: