2017-10-05 3 views
0

ロードボタンを押したときにのみiframeをロードします。"ロード"ボタンをクリックした後にのみ、フレームを読み込みます

<html> 
    <body> 
     <iframe src="page.html" id="push_frame"> 
Frames are not supported. 
     </iframe> 
     <button id="load_frame"> 
      Load 
     </button> 
    </body> 
</html> 

通常、解決するにはJavaScriptが必要です。これをどのように実装できますか?

+0

必要なJavaScriptまたはその他のコードは、ボタンのクリックイベントに割り当て、その後、空の 'src'で開始 – Jishnuraj

+1

提示してください。 – Walk

+0

@Walk完璧なアイデア。必要なコードを追加してください(たとえば、

答えて

1

を使用してください。それは多くのクリーナーを見て、コードの行を減らします。

$('#load_frame').on('click', function() { 
    $('#push_frame').attr('src', 'page.html'); 
}); 

私は働いているフィドルhereを入れました。

+0

jQueryライブラリのすべてのコード行を除いて); – Walk

1

は、私は新しいattrを指定するには、jQueryのを使用することになり、この

document.getElementById('load_frame').onclick = function() { 

    var iframe = document.createElement('iframe'); 
    iframe.src = 'page.html'; 
    document.body.appendChild(iframe); 

}; 
+0

私はこのコードをテストしていませんが、src属性を変更するという考え方は完璧ですから、この回答を受け入れることにします。 – Jishnuraj

2

これは私がそれを行う方法です。あなたのURLをdata属性に格納してから、クリックイベントで取得してください。

function loadFrame() { 
 
    var frame = document.getElementById('push_frame'); 
 
    frame.src = frame.dataset.src; 
 
}
<html> 
 

 
<body> 
 
    <iframe data-src="page.html" src="" id="push_frame"> 
 
Frames are not supported. 
 
</iframe> 
 
    <button id="load_frame" onclick="loadFrame()"> 
 
Load 
 
</button> 
 
</body> 
 

 
</html>

+0

十分です!私は3つのアンサーを持っています – Jishnuraj

+0

私はそれが最もエレガントな答えだと思うので、これを+1してください。 –

関連する問題