如何在Popup div中加载iframe内容？

3 回答

• 0

  <script>
  
    $(document).ready(function(){
    $(".openpop").click(function(){
      var x =    $(this).attr('href');
      y =  x.replace('#', '');
      $(".popup").show().html('<iframe src="'+y+'"></iframe>');
      $("iframe").attr("href", y);
  
  
    });
  
     $(".close").click(function(){
       $(this).parent().fadeOut("slow");
    }); 
  
  });
  
    </script>
  

  你不能打开谷歌和雅虎在iframe两个网站都不允许它请看到这个链接Why Iframe dosen't work for yahoo.com

  但您可以使用此代码打开w3school

  回复于 2024-05-01T21:59:25+08:00
• 8

  首先，您不需要链接中的＃ . 只需调用 e.preventDefault(); 即可停止执行链接 .

  出于安全原因，您无法打开每个链接，例如 . 谷歌 .

  此外，您可能不会使用切换，因为如果框架已经打开，您总是必须单击两次 .

  这是 working fiddle

  HTML

  <div class="links">
      <a class="openpop" href="http://getbootstrap.com/">Link 1</a>
      <a class="openpop" href="http://www.jsfiddle.net">Link 2</a>
      <a class="openpop" href="http://www.w3schools.com">Link 3</a>
  </div>
  <div class="wrapper">
      <div class="popup">
          <iframe src="">
              <p>Your browser does not support iframes.</p>
          </iframe>
  <a href="#" class="close">X</a>
      </div>
  </div>
  

  jQuery的

  $(document).ready(function () {
      $(".popup").hide();
      $(".openpop").click(function (e) {
          e.preventDefault();
          $("iframe").attr("src", $(this).attr('href'));
          $(".links").fadeOut('slow');
          $(".popup").fadeIn('slow');
      });
  
      $(".close").click(function () {
          $(this).parent().fadeOut("slow");
          $(".links").fadeIn("slow");
      });
  });
  

  当然，你必须在样式上做一些改变，以获得更好的视图体验:)

  回复于 2024-05-01T21:59:25+08:00
• 0

  你也可以用这个

  $('#clickme').click( function(){
      $('#showDiv').show();
      $('#iframe').attr('src','your url');
  });
  

  回复于 2024-05-01T21:59:25+08:00