0

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

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

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

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

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

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

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

4

2 回答 2

1

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

2) 使用 JSON-P

于 2013-10-08T06:10:28.107 回答
1

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

所以在父页面上你会有一个脚本，比如

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);

希望这可以帮助。

于 2013-10-08T06:17:25.110 回答