Как загрузить содержимое iframe в Popup div?

Question

Как загрузить содержимое iframe во всплывающем div. popup div будет открыт при щелчке по каждой ссылке из каждой ссылки, URL-адрес страницы будет загружен в iframe href внутри всплывающего div.

$(document).ready(function(){ 
    $(".openpop").click(function(){ 
    var x = $(this).attr('href'); 
    alert(x); 
    y = x.replace('#', ''); 
    alert(y); 
    $(".popup").toggle(); 
    $("iframe").attr("href", y); 

    }); 

    $(".close").click(function(){ 
    $(this).parent().fadeOut("slow"); 
    }); 

}); 

HTML

<a class="openpop" href="#http://www.google.com">Link 1</a> 
<a class="openpop" href="#http://www.yahoo.com">Link 2</a> 
<a class="openpop" href="#http://www.w3schools.com">Link 3</a> 
<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> 

Answer 1

Во-первых, вам не нужно # в ссылке. Просто позвоните e.preventDefault();, чтобы остановить выполнение ссылки.

По соображениям безопасности вы не можете открыть любую ссылку, например. Google.

Также вы можете не использовать переключатель, потому что вам всегда нужно дважды щелкнуть его, если фрейм уже открыт.

вот 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"); 
    }); 
}); 

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

Answer 2

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

вы не можете открыть Google и Yahoo в IFRAME как сайт не позволяет это увидеть, пожалуйста, эту ссылку Why Iframe dosen't work for yahoo.com

но вы можете открыть W3School с этим кодом

Answer 3

Вы также можете использовать этот

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