在 Paypal iFrame 中捕获点击立即付款按钮（跨域）答案

【问题标题】：Capture click of Pay Now button in Paypal iFrame (cross domain)在 Paypal iFrame 中捕获点击立即付款按钮（跨域）
【发布时间】：2016-08-10 20:41:48
【问题描述】：

我有一个使用 Paypal 支付流程的支付系统，他们向我发送 iFrame 以进行渲染。我想捕捉点击“立即付款”按钮的时间，以便在交易处理过程中隐藏页面上的“取消”按钮。

我已经尝试过常用的 jQuery：

$("#iFrame .button").click(function(){});

和

$("#iFrame").contents().find("input[type='button']")

但没有任何效果。我得到了错误：

未捕获的 DOMException：无法从 'HTMLIFrameElement' 读取 'contentDocument' 属性：阻止具有源“http://localhost”的框架访问跨域框架

关于如何捕获点击的任何想法？

【问题讨论】：

你不能那样做。想象一下，如果您想使用 javascript 代表用户单击“立即付款”按钮...
或在用户名/密码字段中捕获按键...

标签： jquery iframe paypal

【解决方案1】：

您无法从托管站点访问任何事件或与 iFrame 的内容进行交互。

但是，您可以判断用户是否在 iFrame 内部单击。因此，您可以做的最好的事情是为点击 iFrame 设置一个侦听器，然后假设他们正在执行订单并隐藏您的按钮。像这样：

focus();
var listener = addEventListener('blur', function() {
    if(document.activeElement === document.getElementById('iframe')) {
        // clicked
    }
    removeEventListener(listener);
});

【讨论】：

【解决方案2】：

好的，所以我一直在使用@JCue 的答案来捕获 PayPal 按钮单击，直到我使用已弃用的 Checkout.JS PayPal 版本。现在我们正在迁移到最新的 SDK 版本，它提供了开箱即用的 onClick 函数。

<script>
 paypal.Buttons({
  // onClick is called when the button is clicked
  onClick: function(data, actions) {
   Your Code Here
  }
  ...
 })
</script>

参考这里-https://developer.paypal.com/docs/checkout/integration-features/validation/

【讨论】：

【解决方案3】：

PayPal 不会传播其点击次数，因此请收听单击 PayPal 按钮时添加的元素。如果您想在单击 PayPal Pay now 按钮时执行某些操作，最好的解决方法是：

注意：“paypal-checkout-sandbox”类也是 paypal 使用的类名，即使在生产中也是如此。查询：

$(document).on('DOMNodeInserted', function(e) {
    if($(e.target).hasClass('paypal-checkout-sandbox')){
        //DO SOMETHING.
    }
});

【讨论】：

谢谢。我问这个已经4年了。我的解决办法是……是……几乎明白了……我不记得了，但当我有机会解开这个谜团时，我会查一下。
如果有人想知道，这与生产版本很相配。