Stripe.js仅在放入灯箱时发生冲突

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}包含在colorbox选项中，以确保内容独立运行，而不会受到加载页面的干扰，因此会产生冲突。

！