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

通过jQuery

1 个答案: