Question

我想用javascript将外部链接嵌入我的锚标记。

当我按下achor标签时，实际上是一个图像，我想加载＆lt; iframe＆gt;与外部链接。

首先，我需要隐藏iframe，并且仅在单击锚标记时显示。

这是我到目前为止所做的：

HTML

<a href="#" onclick="openUrl();"><iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="img/icon.png"></a>

JS

function openUrl(){
    var myUrl = "https://www.youtube.com/embed/zBFGkUmVkAs";
    document.getElementsByName('myIframe')[0].src = myUrl;
}

}）;

但它不起作用

请帮忙吗？

谢谢！

Answer 1

你可以试试这个：

  function openUrl() {
            var iframe = document.getElementById("myFrame");
            iframe.style.display = "block";
            iframe.attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
            }

 <a href="#" onclick="openUrl();">
   <img src="img/icon.png">
 </a> 
 <iframe width="560" height="315" id="myFrame"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none">
 </iframe>

Answer 2

@ aiden87 试试下面的代码，我做了一个演示，请检查此链接。 https://jsfiddle.net/saujankmarv/p7z38rhq/8/

HTML：

<a href="#" id="atag">
<img src="img/icon.png">
  <iframe style="display:none;" id="myFrame"></iframe>
</a>

JS

var  openUrl = function() {
console.log('log');
var iframe = document.getElementById("myFrame");
iframe.src = "https://www.youtube.com/embed/zBFGkUmVkAs";
iframe.style.display = "block";
}
document.getElementById('atag').addEventListener('click', openUrl);

Answer 3

试试这个。

function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
}

<a href="#" onclick="openUrl();"><img src="img/icon.png"></a>
<iframe width="560" height="315" id="myFrame" src="https://www.youtube.com/embed/zBFGkUmVkAs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none"></iframe>

Answer 4

内联点击处理程序不是最佳解决方案，您可以先隐藏iframe，然后切换其可见性。

$('a').on('click' , function(){
	$(this).find('iframe').attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
        $(this).find('iframe').slideToggle(0);
	return false;
})

a > iframe {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png"></a>

将外部链接嵌入锚标记

4 个答案: