與jQuery動態加載的iFrame交互

Question

通過單擊X。我想隱藏容納我的iFrame的div 。 我使用jQuery插入了iFrame。 我用我的示例創建了一個jsFiddle 。 現在，如果我可以在單擊X時“單擊”控制台，那我會很高興的。

這是我的jQuery，它會插入並嘗試隱藏包含我的iFrame的div。

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

$('#fresh-credit-button').on('click', function(){
  console.log("clicked");
});

});

我沒有跨域問題，因為我通過Shopify使用了appProxy。

Answer 1

如果您已經解決了跨域問題，則可以這樣做。

獲取對該iframe的引用：

var iframe = document.querySelector('iframe[src="https://test-4658.myshopify.com/apps/proxy/credit"]')

然后從那里開始，如下所示：

var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

然后附加onclick事件

var closeBtn = innerDoc.getElementById('fresh-credit-button');

closeBtn.addEventListener('click',function(){
    //close div here
    //same idea when accessing the div element from the iframe
});

這僅是用本機JS編寫的，如果需要，您可以通過jQuery完成。 我希望它可以幫助您找到從頭開始修復的方法，因為我無法創建摘要。

Answer 2

嗯...您可以嘗試通過jquery這樣流式傳輸網站： https ： //jsfiddle.net/uxc930xr/15/

$('#message').load('https://test-4658.myshopify.com/apps/proxy/credit');

不幸的是，這不能在jsfiddle上運行，因為它阻止了其他來源的jQuery HTML