Question

在我的 index.ejs 内插入了 iframe 标记，将另一个文档嵌入当前文档中。在此iframe中，我有一个表格。

<iframe 
  src="purchase/form.html" scrolling="yes" id="purchase"
  style="min-width:280px;width:100%;height:400px;border:none;"
  frameborder="none" 
  allowTransparency="true" >
</iframe>

在此表单内，我要定位一个带有stripe_button类的Button，代码如下所示

<button type="submit" class="btn btn-primary btn-lg stripe_button" style="z-index: 1;">
      <span class="fa fa-credit-card-alt" aria-hidden="true"></span>
      Pay
</button>

使用以下Javascript代码执行

// target iframe inside index.ejs
    var iframe = document.getElementById('purchase')
// get iframe content
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
// targeting class and awaiting click event to run function
    var stripe = innerDoc.getElementsByClassName('stripe_button')
        for (var i = 0; i < stripe.length; i++) {
         var stripe_button = stripe[i]
          stripe_button.addEventListener('click', purchaseClicked)
    }

整个代码都在我准备好的函数中

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()

如果我尝试运行此命令，则会得到Failed to load resource: the server responded with a status of 404 (Not Found)

，我认为这是因为我试图在localhost上提交表单，到目前为止，这还很有意义，还告诉我click事件正在起作用。但是，如果我从按钮中删除type="submit"并刷新，尽管 purchaseClicked 功能应开始工作。

purchaseClicked函数如下所示

function purchaseClicked() {
    var priceElement = document.getElementsByClassName('zahl')[0]
    var price = parseFloat(priceElement.innerText.replace('$', '')) * 100
    updateCartTotal()
    stripeHandler.open({
        amount: price
    })
}

基本上，它称为条纹弹出式付款。

我知道，如果我从index.ejs文件中分配按钮，这将起作用例如：document.getElementsByClassName('checkout_button')[0].addEventListener('click', purchaseClicked)

我认为它与click事件有关。

相同域。我知道CROSS。

Answer 1

将此功能包装为一个全新的功能

function stripe() {
// target iframe inside index.ejs
    var iframe = document.getElementById('purchase')
// get iframe content
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
// targeting class and awaiting click event to run function
    var stripe = innerDoc.getElementsByClassName('stripe_button')
        for (var i = 0; i < stripe.length; i++) {
         var stripe_button = stripe[i]
          stripe_button.addEventListener('click', purchaseClicked)
    }
}

并在iframe中调用

parent.function()

解决了。

iframe中的点击事件

1 个答案: