2015-02-18 10 views
1

Ok. Я наткнулся на событие Simple Jquery, где при нажатии он загружает страницу на IFRAME на свой DIV.
JS Fiddle here

Теперь, Что я на самом деле хотите достичь есть
Загрузка страницы при событии Click

  1. вместо использования двух отдельных кодов классифицируя их # frame1, # frame2, мне это нужно, чтобы загрузить события, используя тот же самый код

    showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block'; }

  2. При нажатии в liststyle, соответствующие нагрузки IFrame страницы, теперь на нажатия на liststyle, соответствующий IFrame страницы для нагрузок и страницы, загруженной на должен исчезнуть (или убиты, лол)

Desired Fiddle Demo

Я понимаю, что его нельзя использовать один и тот же идентификатор в Div, поэтому я попытался использовать синтаксис document.getElementByClassName, но он не работает.
Любая помощь Пожалуйста.

+0

Вы принимаете код jquery? потому что вы помещаете тег, но ваш код просто чистый JS ... –

+1

Вы спрашиваете об этом http://jsfiddle.net/rajmathan/hbh4bmy5/? – rajmathan

+0

@Qubex_, да JQuery тоже будет работать. – Lemdor

ответ

1

Попробуйте jsFiddle. Два фрейма подключены к ссылкам через данные-значение URL

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); 
} 
+0

Спасибо @Jackson, но я заметил, что DIV используют один и тот же Id, не будет ли это проблемой? Я использую множество количеств DIvs, поэтому предоставление одинаковых идентификаторов было бы правильным вопросом – Lemdor

+0

Да, вы правы. Я удалил их сейчас. На одной странице никогда не должно быть дубликатов идентификаторов. Вам нужны только идентификаторы в качестве средства привязки якоря к iframe. Итак, где ссылка имеет href из '# iframetarget1', iframe должен иметь идентификатор 'iframetarget1' – Jackson

+0

Теперь скрипка не работает ... lol. 'document.getElementById ('frame')' все еще вызывается в коде, но в пользовательском интерфейсе, его нет там na – Lemdor

1

Надеюсь, что это сработает! Я использую getelementbyClassName атрибут здесь ..

http://jsfiddle.net/rajmathan/3420cbkt/

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%;} 
+0

@ uʍopǝpısdn Спасибо за ваш совет :) – rajmathan

+0

Спасибо Ton @rajmathan. это работает :) Если я могу настаивать, могу ли я запросить еще одно дополнение к этому коду pliz – Lemdor

+0

@Lemdor Glad its Worked :) Здесь, чтобы помочь вам. – rajmathan

0

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

+0

Sensebe, вы неправильно поняли мой запрос, но спасибо в любом случае за усилия. очень признателен! – Lemdor

0
  1. Вы должны добавить обработчики событий с помощью кода, например,

    $ ('# element'). On ('click', function() {// logic});

  2. Каждое событие передает объект обработчику, в котором хранится исполнитель. Вы можете предоставить исполнителю некоторые атрибуты data- *, содержащие URL-адрес или что-то в этом роде.

Вот некоторые ссылки:

Смежные вопросы