Question

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

在javascript小部件中重新创建交互式购物车UI，然后使用AJAX将值传递到服务器脚本，将变量传递到主站点，当用户点击“checkout”时，用户将被重定向到主购物车站点并填充变量从小部件中输入的内容。
- 专业人士：完整体验
- 缺点：大部分工作都是为了完成创建UI和AJAX请求。
以某种方式检测用户是否通过iframe访问购物车，如果是这种情况，则当用户点击“checkout”将用户重定向到安全页面并通过AJAX从购物车获取变量时，会打开新窗口的备用代码最后结账。
- 专业人士：中等工作量，必须执行AJAX请求才能从购物车中获取变量以填充最终结帐
- 缺点：我们是否可以轻松检测是否正在从另一个网站上的iframe内的用户访问该网站？
在iframe / widget中完成整个结帐流程。
- 专业人士最少工作，只需在iframe中嵌入购物车
- 缺点：不会在浏览器中显示https用户可能不愿意购买

什么是最佳选择？

Answer 1

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

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

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

选项2：很混乱。您可以通过附加url参数来判断请求是否来自远程表单（如iframe）。但采取你所建议的方法并没有多大意义。

选项3：太重了，除非你采取模式方法，就像我在回答选项1时提到的那样。

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

Answer 2

如果您对选项2的唯一顾虑是检测您的内容是否在iframe中加载，则可以使用“top.frames.length”或"top === self."

来使用JavaScript执行此操作

例如，您可以使用以下内容显示或隐藏不同的条件表单内容或不同的提交按钮：

if (top.frames.length == 0) {
    // Show content if not embedded in an iframe.
    document.getElementById('embedded-content').style.display = "none";
    document.getElementById('unembedded-content').style.display = "block";
}
else {
    // Show content if embedded in an iframe.
    document.getElementById('embedded-content').style.display = "block";
    document.getElementById('unembedded-content').style.display = "none";
}

Answer 3

正如您所说，第一个选项在用户体验方面是最好的，并且最有可能实现最高转化率。转换与下一个最佳解决方案相比有多好，无法客观衡量，因为它涉及经常性客户，您自己的品牌名称，产品类型等。由于转换率将直接影响您（和您的公司），因此明智地首先要估计你的努力是否值得在短期和长期内获得。

第二种选择是甜蜜的中间立场;您仍然可以获得品牌认可，客户将获得一些安全保证（通过地址栏）; （i）通过简单的JavaScript比较可以轻松完成帧检测：top === window。但是，你失去了连续性，因此可能会失去一些转换。如果这种风险是可控的，我会在短期内选择这个选项。

无法通过绿色锁直接查看安全证书使第三个选项最不可取。然而，并非所有人都失去了;通过巧妙地使用图像，您仍然可以与最终用户建立一定的信任，如this image中所述，这是Smashing Magazine中出色的article的一部分。

您的决定应基于：

短期内可以做些什么
从长远来看应该做些什么
对潜在客户的安全视觉提示有多重要
花在解决方案与收入上的时间/金钱（盈亏平衡分析）

检测是否通过iframe访问网站？嵌入小工具与购物车

3 个答案: