如何在弹出框中加载iframe内容？

Question

如何在弹出的div中加载iframe内容。 每次单击链接时，都会打开弹出的div。 从每个链接中，页面网址将加载到弹出式div内部的iframe href中。

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

- PRANAV

---

希望能够得到一个 JSFiddle 以更好地理解。 - Dwza

iframe 上没有 href 属性，应该使用 src 属性，$("iframe").attr("src", y); 然后 x-frame-options 就会干扰它。 - SSA

Answer 1

首先，链接中不需要 #。只需调用e.preventDefault();来阻止链接执行。

出于安全原因，您无法打开所有链接，例如Google。

此外，您可能不使用toggle，因为如果框架已经打开，则必须点击两次。

这里是一个工作的范例

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

当然您需要对样式进行一些更改，以获得更好的视觉体验 :)

- Dwza

Answer 2

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

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

你不能在iframe中打开Google和Yahoo，因为这两个网站都不允许。请查看此链接为什么无法在yahoo.com上使用iframe。

但是你可以使用以下代码打开w3school。

- Ankit Agrawal

---

嗨，这样行不通... X-Frame-Options 拒绝加载：https://in.yahoo.com/?p=us 不允许框架。谷歌和雅虎的控制台错误。 - Subh

Answer 3

你也可以使用这个

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

- mithunSalinda