與jQuery動態加載iFrame的交互

通過單擊X.我想隱藏安裝我的iFrame的div。我用jQuery插入了iFrame。我用我的例子創建了一個jsFiddle。現在，如果我點擊X時可以「點擊」到控制檯，我會很高興。與jQuery動態加載iFrame的交互

這是我的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。

來源

2017-04-04 ToddT

你會在這裏遇到跨網問題，你不能訪問iframe中具有不同域名的元素。 – Roljhon

我實際上使用的是一個代理服務器，它可以解決跨域問題..雖然好想法！ – ToddT

好吧，那太棒了，你可以訪問元素'iframe.contentWindow.document'或'iframe.contentDocument'。由於jsfiddle的跨域問題，無法創建片段 – Roljhon

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

獲取參照該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，如果你想。我希望它可以幫助您找到一種解決方法，因爲我無法創建片段。

來源

2017-04-04 17:22:08 Roljhon

嗯......你可以嘗試從jQuery的流媒體的網站是這樣的： https://jsfiddle.net/uxc930xr/15/

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

可惜這不能的jsfiddle因爲它阻止jQuery文檔從其他渠道運行

來源

2017-04-04 17:26:32 RobiNERD

與jQuery動態加載iFrame的交互

回答

相關問題