Interact with iframe on same domain via jQuery

Question

I want to interact with an iFrame that I am loading from the same domain.

Shopify provides what is called an AppProxy and this allows folks to serve content from the same domain via this AppProxy . That's what I'm doing.

I have a shop https://test-4658.myshopify.com that when a user signs in and views their account an iframe pops up. The shop is test and you can create an account to see if you'd like.

The jQuery and HTML is below:

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

That part works great, modal shows perfect. In the callback I have this function, with some alerts for testing:

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

In the above code.. The console show's that I found the button in the iframe, but I can't click on it. Even though its from the same domain as the shop. AND if I put this code into the console, it works!!

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

There are other apps on the store that are working just like this. If you click on those black tabs at the bottom of the page you'll see them.

What am I doing wrong?

Answer 1

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

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