如何在Popup div中加載iframe內容？

如何在彈出div中加載iframe內容。 popup div會在每個鏈接點擊每個鏈接時打開，頁面url會加載到iframe href裏面的popup div。如何在Popup div中加載iframe內容？

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

來源

2014-09-11 Anoops

會很高興得到一個jsfiddle更好的理解 – Dwza 2014-09-11 07:43:23

iframe沒有href，它應該是src屬性，$（「iframe」）。attr（「src」，y）;然後x-frame-options會打擾它。 – SSA 2014-09-11 07:43:36

首先，你不需要在＃鏈接。只需撥打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"); 
    }); 
});

當然

你有更好的觀影體驗:)

來源

2014-09-11 07:42:37 Dwza

<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

來源

2014-09-11 07:47:00

嗨，它不會這樣工作..加載被X-Frame-Options拒絕：https：//in.yahoo.com/？p = us不允許框架。谷歌和雅虎控制檯錯誤 – Subh 2014-09-11 07:49:26

@subhkriti是的，它只適用於w3school在這種情況下 – 2014-09-11 07:53:39

您也可以使用此

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

來源

2014-09-11 07:56:28 mithunSalinda

如何在Popup div中加載iframe內容？

回答

相關問題