Question

我希望仅在按下加载按钮时加载iframe。

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

通常这需要某种JavaScript来解决。我该如何实现呢？

Answer 1

我就是这样做的，将您的网址存储在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>

Answer 2

使用此

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

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

};

Answer 3

我会使用jQuery来指定新的attr。它看起来更干净，减少了代码行。

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

我提出了一个工作小提琴here。

仅在点击后加载框架＆＃34;加载＆＃34;按键

3 个答案: