点击事件加载页面

Question

好的。我遇到了一个简单的 Jquery 事件，在该事件中单击时，它会在其各自 DIV 上的 IFRAME 上加载一个页面。
JS Fiddle here

现在，我真正想要实现的是，

而不是使用两个单独的代码按#frame1、#frame2 对它们进行分类，我需要它通过使用相同的代码来加载事件

showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block'; }
点击列表样式中的1，加载相应的iframe页面，现在点击列表样式中的2 , 2对应的iframe页面加载，1加载的页面消失（或者被杀，哈哈）

Desired Fiddle Demo

我知道不可能在 Div 中使用相同的 ID，所以我尝试使用 document.getElementByClassName 语法，但它不起作用。
请提供任何帮助。

Answer 1

希望fiddle 这有效！我在这里使用 getelementbyClassName 属性..

HTML代码如下：

<ul>
<li><a href="#frame" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame" onclick="showIframe('http://imgur.com/');">&nbsp;2</a></li>
</ul>  

<div id="frame" style="background-color:#9C27B0">
<iframe id='iframetarget' class="full" frameborder="0" src=""></iframe>
</div>

Javascript 已关注：

showIframe = function (url) {

    var divs = document.getElementsByClassName('full');
for(var i=0; i < divs.length; i++) { 
  divs[i].src = url;
}

    //document.getElementByClassName('full').src = url;
    document.getElementById('frame').style.display = 'block';
}

Css 如下：

ul{list-style:none;position: fixed;margin:0;padding:0;}
ul li{float:left}
a{text-decoration:none}

.full {width:100%; height:100%;}

Answer 2

使用 jquery 代码试试这个

Html

<ul>
<li><a href="#frame1" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame2" onclick="showIframe2('http://imgur.com/');">&nbsp;2</a></li>
</ul>
<br><br>


<div id="frame1" style="background-color:#9C27B0">
<iframe id='iframetarget1' class="full" frameborder="0" src=""></iframe>
</div>
<br>


<div id="frame2" style="background-color:#ffd800">
<iframe id='iframetarget2' class="full" frameborder="0" src=""></iframe>
</div>

Javascript

$("#link1").click(showIframe);
$("#link2").click(showIframe);

function showIframe() {
   var target ='#'+ $(this).attr('data-target');
   var url = $(this).attr('data-url');
   $(target).attr('src',url);  
   $(target).parent().css("display:'block'");
}

https://jsfiddle.net/q8co5tpe/

Answer 3

您应该通过代码添加事件侦听器，例如

$('#element').on('click', function(){ //逻辑});
每个事件都会将一个对象传递给处理程序，该处理程序包含执行程序。你可以给执行者一些 data-* 属性，其中包含 url 或其他东西。

这里有一些参考资料：

Answer 4

试试这个 jsFiddle。两个 iframe 通过 data-url value

连接到链接

var btns = document.getElementsByClassName('iframe-btn');
for( var i=0;i<btns.length;i++){
    btns[i].addEventListener("click", function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var target = this.getAttribute('href').split('#')[1];

        var iframes = document.getElementsByTagName('iframe');
        for( var j=0;j<btns.length;j++){
            iframes[j].src='';
        }
        document.getElementById(target).src = url;
        document.getElementById(target).style.display = 'block'; 
    }, false);
}

点击事件加载页面

Load Page on Click Event

html

css

iframe

jquery