Question

我正在使用Stripe.js向客户添加卡片。我已在标准页面上成功完成此操作，但现在我看一下，页面上的信息太少，我想把它放在灯箱里。我已将所有相关的脚本内容从主站点标题转移到灯箱标题，但它在某处发生冲突，我无法解决原因。

这些是我原始标题中包含的所有脚本：

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script src="/js/admin_general.js"></script>
<!--[if lt IE 9]>
    <script type="text/javascript" src="/js/tipped/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/tipped/spinners.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    Stripe.setPublishableKey("my_key_here");
</script>

...这是我的新标题中包含的脚本：

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!--[if lt IE 9]>
    <script type="text/javascript" src="/js/tipped/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/tipped/spinners.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    Stripe.setPublishableKey("my_key_here");
</script>

（显然我的钥匙实际上在那里）

直接加载到浏览器窗口时可以正常工作，但是当完全相同的页面加载到颜色框中时，会出现以下错误：

ReferenceError: Stripe is not defined

我已经尝试延迟密钥的设置，直到文档准备就绪，以防它在加载stripe.js之前尝试设置密钥，但我没有尝试过任何工作......因为它可以直接在浏览器窗口中工作，所以它必须与某些东西冲突，但是什么呢？如果我删除倾斜的js脚本的所有痕迹和包含物，则会以完全相同的方式发生这种情况。

这真的令人沮丧，任何人都可以解释一下吗？

Answer 1

我解决了这个问题。我需要将{iframe:true}包含在颜色框选项中，以确保内容自行起作用而不会受到加载页面的干扰，从而产生冲突。

呼！

Stripe.js只有在放入灯箱时才会发生冲突

1 个答案: