通过jQuery与同一域上的iframe进行交互

Question

我想与从同一个域加载的iFrame进行交互。

Shopify提供了所谓的AppProxy ，这使人们可以通过此AppProxy提供来自同一域的内容。 那就是我在做的

我有一家商店https://test-4658.myshopify.com ，当用户登录并查看其帐户时，会弹出iframe。 该商店已经过测试，您可以创建一个帐户来查看是否要购买。

jQuery和HTML如下：

var frame = "<div id='fresh-credit' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; z-index: 2147483647; box-sizing: border-box;'>\n" + 
      "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +
        "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +
          "<iframe onload=this.style.visibility='visible' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +
        "</div>\n" +
    "</div>";

function showModal(callback){
  $(document).ready(function(){  
  if (document.location.pathname === '/account'){
    console.log("now");
  $('body').append($.parseHTML(frame));
  }
});
callback();
}

该部分效果很好，模态显示完美。 在回调中，我具有此功能，并提供一些警报以进行测试：

function getMe(){

$(function(){
  $("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").click(function(){alert("yep it worked");});
  var button = $("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button");
  console.log("Did I find the button? " + button );
  button.click(function(){
    console.log("clicked");
  });
});
}

showModal(getMe);

在上面的代码中。控制台显示的是我在iframe中找到了按钮，但是无法单击它。 即使它与商店来自同一域。 而且，如果我将此代码放入控制台，它就可以工作！！

$("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").click(function(){alert("yep it worked");});

商店中还有其他类似的应用程序。 如果单击页面底部的黑色标签，则会看到它们。

我究竟做错了什么？

Answer 1

尝试此操作，单击是一种简写功能，但这可能会起作用。

$("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").on( "click", function(){alert("yep it worked");});