Iframe 内的点击事件

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 的 class 定位一个按钮，代码如下所示

<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)
    }

整个代码在我准备好的 function 里面

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

如果我尝试运行它，我会Failed to load resource: the server responded with a status of 404 (Not Found)

我认为这是因为我试图在本地主机上提交一个表单，到目前为止这很有意义也告诉我点击事件正在工作。 但是，如果我从按钮中删除type="submit"并刷新没有任何反应，尽管purchaseClicked function应该开始工作。

purchaseClicked点击的function 长这样

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)

我认为它与点击事件有关。

同域。 我知道交叉。

Answer 1

将此 function 包装成一个全新的 function

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()

解决了。