jQueryとのインタラクト動的にiFrameをロード

Question

Xをクリックすると、私のiFrameが格納されているdivを隠したいと思います。私はiFrameをjQueryと共に挿入しました。私はjsFiddleを作成しました。今すぐXをクリックしたときにコンソールに「クリック」されるだけであれば、私は満足しています。

ここに私のiFrameを含んでいるdivを挿入し、隠そうとする私のjQueryがあります。

$(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

すでにドメイン間の問題を修正している場合は、このようにすることができます。

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

その後

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

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

のonclickイベントを添付：それは以下のようにそこにやるから次に

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

：

は、IFRAMEへの参照を取得します。

これはネイティブJSで書かれています。必要に応じてjQuery経由で実行できます。スニペットを作成できなかったので、あなたが最後から修正する方法を見つけるのを助けてくれることを願っています。

Answer 2

うーん...あなたはこのようにjqueryのからウェブサイトのストリーミングを試みることができる： https://jsfiddle.net/uxc930xr/15/

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

は、残念ながら、これが原因、それは他のソースからのjQueryのhtmlを遮断するjsfiddle上で実行することはできません