jQuery 如何在 Popup div 中加载 iframe 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25781628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Load iframe content in Popup div?
提问by Anoops
How to Load iframe content in Popup div. popup div will be open on click of each link from each link, page url will load to iframe href inside popup div.
如何在 Popup div 中加载 iframe 内容。弹出 div 将在点击每个链接的每个链接时打开，页面 url 将加载到弹出 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
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>
回答by Dwza
First, you don't need # in the link. Just call e.preventDefault();to stop the link from executing.
首先，链接中不需要#。只需调用e.preventDefault();即可停止执行链接。
For security reasons you can't open every link eg. google.
出于安全原因，您无法打开每个链接，例如。谷歌。
Also you might not use toggle because you allways have to click it twice if a frame is opend already.
此外，您可能不会使用切换，因为如果框架已经打开，您总是必须单击它两次。
here is a working fiddle
这是一个工作小提琴
html
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");
});
});
of course you have to do some changes in styling for better view experience :)
当然，您必须对样式进行一些更改才能获得更好的观看体验:)
回答by Ankit Agrawal
<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>
you can not open google and yahoo in iframe both site don't allow for it please see this link Why Iframe dosen't work for yahoo.com
您无法在 iframe 中打开 google 和 yahoo 两个站点都不允许，请参阅此链接 为什么 iframe 不适用于 yahoo.com
but you can open w3school with this code
但是您可以使用此代码打开 w3school
回答by mithunSalinda
You can also use this
你也可以用这个
$('#clickme').click( function(){
$('#showDiv').show();
$('#iframe').attr('src','your url');
});
