点击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>属性

  离。 <iframe name =＆＃34; iframe0＆＃34; src="about:blank" ...></iframe>

• 将<a> nchor [href]属性设置为预定目标的网址。

  离。 <a的 HREF =＆＃34; HTTPS：//www.example.com" ...>...</a>

• 将<a> nchor [target]属性设置为<iframe> [name]属性。

  离。 <a href="https://www.example.com"的目标=＆＃34; iframe0＆＃34; ...＆GT; ...</a>

演示

＆＃13;

＆＃13;

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

.btn {
  text-align: center;
}

a {
  text-decoration: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

只需查看fiddle

即可