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