点击iframe需要加载

Question

当自动加载页面iframe也加载时，它必须不要这样做当我点击按钮，然后只有iframe需要加载但在iframe中有url

请你在jsfiddle给我一些例子

<input type="button">Load</input>

 <div class="copy">
  <iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>

Answer 1

您可以隐藏iframe onload，然后在单击时显示。

<button id="btnLoad" type="button">Load</button>

<div class="copy">
    <iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>

<script>
        const btnLoad= document.getElementById('btnLoad');

        btnLoad.addEventListener("click", function(){
             document.getElementById("font").style.display = "block";
        });

</script>

Answer 2

使用<a>nchor和<iframe>。无需JavaScript。

• 为[name]设置<iframe>属性 恩。 <iframename =“iframe0”src="about:blank" ...></iframe>
• 将<a>nchor [href]属性设置为预期目标的URL。 恩。 <ahref = “https://www.example.com” ...>...</a>
• 将<a>nchor [target]属性设置为<iframe> [name]属性。 恩。 <a href="https://www.example.com"target = “iframe0” ...> ...</a>

演示

html,
body {
  height: 100%;
  width: 100%;
  font: 400 16px/1.5 Consolas;
}

.btn {
  text-align: center;
}

a {
  text-decoration: none;
}

<button class='btn'>
<a  href="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" target="frame0">VIDEO</a>
</button>

<figure class='box'>
  <iframe name='frame0' src="about:blank" frameborder="0"  width="480" height="270"></iframe>
</figure>

Answer 3

Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.

只需检查fiddle