Загрузка iframe при клике

bork75

bork75

The Team
Регистрация
21 Июн 2008
Сообщения
1.455
Реакции
734
Есть скрытый див, в нём есть ифрейм, который сразу грузится,
Как сделать, что бы сайт начал грузится в ифрейм, только при клике на "Покажись/Закройся" и не грузился повторно, после дальнейших кликов по "Покажись/Закройся"

примеры нашел, реализовать не получается
Для просмотра ссылки Войди или Зарегистрируйся

Код: 
<a href="javascript:sh()">Покажись/Закройся</a>

<div id="blabla" style="display:none">
   Скрытый текст
   <iframe src="http://sait.ru" frameborder="0"></iframe>
</div>

<script type="text/javascript">
function sh() {
obj = document.getElementById("blabla");
if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>
 
На jQuery:
HTML: 
  <a href="#" class="click">Клик</a>
  <div class="mydiv"></div>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(function(){
  $('.click').on('click', function(){
    if($('#blabla').length === 0){
     $('<iframe />', {
       id : 'blabla',
       src : 'http://nic.ru'
     }).appendTo('.mydiv');
    }
  });
});
</script>
А если нужно по клику еще скрывать и показывать, то
HTML: 
 <a href="#" class="click">Клик</a>

  <div class="mydiv" style="display:none">текст
    <br /><br /></div>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(function(){
  $('.click').on('click', function(){
   $('.mydiv').slideToggle(0);
   if($('#blabla').length === 0){
    $('<iframe />', {
      id : 'blabla',
      src : 'http://nic.ru',
    }).appendTo('.mydiv');
   }
  });
});
</script>
 
Последнее редактирование:
Absolute написал(а):
На jQuery:
Нажмите для раскрытия...

Спасибо, работает отлично!
Попробовал сделать на несколько ссылок разные фреймы, получилось.
Посмотри, нормально так, если кусок кода повторяю несколько раз или можно проще? Так вроде мне понятно.

Код: 
<!DOCTYPE HTML>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>

<style>

.blue {background-color: #CC66CC }
.orange {background-color: orange  }
.button span {display:block;}
.b,.c,.d,.e {display:none; height:100%;}
iframe {width:100%;  height:500px;}

</style>

<a class="blue" href="javascript:navigate_tabs('b','2');" id="2">Ссылка 1</a>
<a class="blue" href="javascript:navigate_tabs('c','3');" id="3">Ссылка 2</a>
<a class="blue" href="javascript:navigate_tabs('d','4');" id="4">Ссылка 3</a>

<div class="b"> текст 1 </div>
<div class="c"> текст 2 </div>            
<div class="d"> текст 3 </div>   

<script>
  $(document).ready(function(){
  $('#2').on('click', function(){
   if($('#my_iframe').length === 0){
    $('<iframe />', {
      id : 'my_iframe',
      src : 'http://nic.ru',
    }).appendTo('.b');
   }
  });
});

  $(document).ready(function(){
  $('#3').on('click', function(){

   if($('#my_iframe2').length === 0){
    $('<iframe />', {
      id : 'my_iframe2',
      src : 'http://555.ru',
    }).appendTo('.c');
   }
  });
});


  $(document).ready(function(){
  $('#4').on('click', function(){

   if($('#my_iframe3').length === 0){
    $('<iframe />', {
      id : 'my_iframe3',
      src : 'http://777.ru',
    }).appendTo('.d');
   }
  });
});

</script>

<!-- Для переключения стилей в кнопках -->

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
    $("#1").addClass('orange');
});

function navigate_tabs(container, tab)
{   
    $(".a").css('display' , 'none');
    $(".b").css('display' , 'none');
    $(".c").css('display' , 'none');
    $(".d").css('display' , 'none');
    $(".e").css('display' , 'none');
   
   
    $("#1").removeClass('orange');
    $("#2").removeClass('orange');
    $("#3").removeClass('orange');
    $("#4").removeClass('orange');
    $("#5").removeClass('orange');
   
    $("#"+tab).addClass('orange');
    // $("."+container).show('slow');
    $("."+container).show();
}
// ]]>

</script>

</body>
</html>
 
bork75 написал(а):
Посмотри, нормально так, если кусок кода повторяю несколько раз или можно проще? Так вроде мне понятно.
Нажмите для раскрытия...
Можно, например так:
HTML: 
  <a href="#" class="click" data-frameid="1" data-framesrc="http://nic.ru">Клик 1</a><br>
  <a href="#" class="click" data-frameid="2" data-framesrc="http://r01.ru">Клик 2</a><br>
  <a href="#" class="click" data-frameid="3" data-framesrc="http://webnames.ru">Клик 3</a>


  <div class="frameid-1"></div>
  <div class="frameid-2"></div>
  <div class="frameid-3"></div>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(document).ready(function(){
  $('.click').on('click', function(){
    var frameId = $(this).data('frameid'),
        frameSrc = $(this).data('framesrc');
    if(!document.getElementById(frameId)){
      $('<iframe />', {
       id : frameId,
       src : frameSrc
      }).appendTo('.frameid-'+frameId);
    }
  });
}); 
  </script>
 
Absolute написал(а):
Можно, например так:
Нажмите для раскрытия...
подскажи, как заменить пример ниже, на jQuery (забрать значение из data-framesrc="Для просмотра ссылки Войди или Зарегистрируйся")

HTML: 
<div class="frameid-1"><a href="http://nic.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
<div class="frameid-2"><a href="http://r01.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
<div class="frameid-3"><a href="http://webnames.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
 
bork75 написал(а):
подскажи, как заменить пример ниже, на jQuery (забрать значение из data-framesrc="Для просмотра ссылки Войди или Зарегистрируйся")

HTML: 
<div class="frameid-1"><a href="http://nic.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
<div class="frameid-2"><a href="http://r01.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
<div class="frameid-3"><a href="http://webnames.ru" target="_blank">Открыть  ссылку в новом окне</a></div>
Нажмите для раскрытия...
Не совсем понял вопрос.
Получить значение атрибута href на jQuery в вашем примере можно так:
var myLink = $('.frameid-1 a').attr('href');

Получить по клику на определенном элементе значение атрибута вложенного элемента:
Код: 
$(document).ready(function(){
  $('div[class^="frameid-"]').on('click', function(){
    var myLink = $(this).children('a').attr('href');
    alert(myLink);
    return false; //отменит переход по ссылке
  });
});
 
Последнее редактирование:
Absolute написал(а):
Получить по клику...
Нажмите для раскрытия...
Спасибо, что помогаешь. Вариант не вписался в дизайн.

Можно ли сделать так? Добавить на страницу чекбокс и в зависимости от его выбора,
загружать страницу в ифрейм или в новом окне, как при клике по обычной ссылки <a href="" target="_blank">Клик 1</a>
HTML: 
<div class="blank"><input type="checkbox" name="option" value="new">Открывать в отдельном окне</div>
Чекбокс по умолчанию не выбран, при клике по ссылкам Клик 1, Клик 2, отрываем страницы в ифрейме,
так как сейчас в коде из Для просмотра ссылки Войди или Зарегистрируйся поста.
Чекбокс выбран, при клике по ссылкам Клик 1, Клик 2, открываем страницы в отдельном окне браузера.
Ну соответственно, если галочку снова убрали с чекбокса, то снова всё в ифрейме.
 
HTML: 
  <div class="blank"><input class="mycheckbox" type="checkbox" name="option" value="new">Открывать в отдельном окне</div>
  <a href="#" class="click" data-frameid="1" data-framesrc="http://nic.ru">Клик 1</a><br>
  <a href="#" class="click" data-frameid="2" data-framesrc="http://r01.ru">Клик 2</a><br>
  <a href="#" class="click" data-frameid="3" data-framesrc="http://webnames.ru">Клик 3</a>


  <div class="frameid-1"></div>
  <div class="frameid-2"></div>
  <div class="frameid-3"></div>

<script>
$(document).ready(function(){
  $('.click').on('click', function(){
    var fr = $(this).data(),
        a = $('.mycheckbox').prop('checked');
    if(!document.getElementById(fr.frameid) && !a){
      $('<iframe />', {
       id : fr.frameid,
       src : fr.framesrc
      })
      .appendTo('.frameid-'+fr.frameid);
     } else if(a) {
      window.open(fr.framesrc);   
    }
  });
});
  </script>
HTML: 
    <div class="blank"><input class="mycheckbox" type="checkbox" name="option" value="new">Открывать в отдельном окне</div>
  <a href="http://nic.ru" class="click" target="_blank">Клик 1</a><br>
  <a href="http://r01.ru" class="click" target="_blank">Клик 2</a><br>
  <a href="http://webnames.ru" class="click" target="_blank">Клик 3</a>

  <div class="frameid-1"></div>
  <div class="frameid-2"></div>
  <div class="frameid-3"></div>


  <script>
  $(document).ready(function(){
   $('.click').on('click', function(){
    var href = $(this).attr('href'),
        a = $('.blank input').prop('checked'),
        frIndex = $(this).index('.click');
    if(!$('iframe[src^="'+href+'"]').length && !a){
      $('<iframe />', {
       src : href
      })
      .appendTo('.frameid-'+(++frIndex));
    }
    return a;
  });
});
  </script>
 
Последнее редактирование:
Немного поправлю себя.
HTML: 
if(!document.getElementById(fr.frameid) && !a){
      $('<iframe />', {
       id : fr.frameid,
       src : fr.framesrc
      })
      .appendTo('.frameid-'+fr.frameid);
     } else if(a) {
      window.open(fr.framesrc);
    }
Это условие корректней записать так:
HTML: 
if(a) {
  window.open(fr.framesrc);
} else if(!document.getElementById(fr.frameid)) {
  $('<iframe />', {
   id : fr.frameid,
   src : fr.framesrc
  })
  .appendTo('.frameid-'+fr.frameid);
}
 
У меня похожая задача, на странице 4 картинки, по клику должен открывать фрейм, кликнув по другой картинке в том же месте (закрыв 1) открываться 2 и так далее. подскажите?
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху