ajax - 检测网站是否正在通过 iframe 访问？将小部件嵌入购物车

Question

我有一个购物车，我想将其嵌入到其他用户网站上的小部件/iframe 中，我看到了三种方法，每种方法都有缺点。以下是从估计最多到最少工作的选项。

在 javascript 小部件中重新创建交互式购物车 UI，然后使用 AJAX 将值传递给服务器脚本，变量被传递到主站点，当用户单击“结帐”时，用户将被重定向到主购物车站点，其中的变量填充了在小部件。

优点:完整体验

缺点:完成创建 UI 和 AJAX 请求的大部分工作。

以某种方式检测用户是否通过 iframe 进入购物车，如果是这种情况，当用户单击“结帐”时，将打开新窗口的备用代码将用户重定向到安全页面并通过 AJAX 从购物车中获取变量以填充最终结帐。

优点:工作量中等，必须执行 AJAX 请求才能从购物车中获取变量以填充最终结帐

缺点:我们是否可以轻松检测是否正在从另一个站点的 iframe 中的用户访问站点？

在 iframe/widget 中完成整个结帐过程。

优点:工作量最少，只需将购物车嵌入 iframe

缺点:不会在浏览器中显示https 用户可能不愿意购买

最好的选择是什么？

Answer 1

如果您能提供更多信息，也许我可以为您提供更好的选择。首先，你用什么(语言/框架)构建了这个应用程序？另外，您是否会说您的应用程序的功能类似于 Shopify 的功能，因为您允许用户通过您的服务托管电子商务网站？如果没有，请告诉我们更多有关您的应用程序的信息。

这是对您提供的选项的快速回复。

选项 1:在我看来，这是唯一真正的选择。无论您是将购物车专门嵌入到 iframe 中，还是将其作为模板的一部分呈现到用户页面上，您都应该将客户导航到您的主站点以完成结帐流程。或者至少给他们很多屏幕空间来使用(例如一个相当大的模态)。

选项 2:很乱。您可以通过附加 url 参数来判断请求是否来自远程表单(如 iframe)。但是采用您建议的方法并没有太大意义。

选项 3:太重了，除非你采用我在回应选项 1 时提到的模态方法。

话虽如此，如果您正在构建类似 Shopify 的应用程序，您应该能够为每个用户的网站构建一个模板，其中有一个部分专门用于显示与当前客户 session 相关的购物车。这种方法不需要 iframe 或小部件。但同样，这完全取决于您的应用程序的用例。