当前网站： 在此输入图像描述
我有一个由使用php和mysql调用我的数据库的for循环生成的网站。我有一个id、名称、公司网站、地址和图片。它目前显示了名称、描述和图像，全部显示在堆叠的正方形框中。
当点击框时，我试图加载公司网站的iframe，然后覆盖框。我已经能够在加载网站时加载所有的网站iframes，但如果有5-6行以上的数据，网站加载非常慢，因为它正在加载大约7个网站。
我花了大部分时间查看jquery和iframe问题，但仍然无法使我的iframes在单击框时单独加载。我的意图是让用户点击描述/公司框而不是iframe。然后，这将加载iframe并使其出现在公司框上，其中它完全覆盖框内容。
如何在不加载动态生成页面内所有iframes的情况下，在单击时加载打开在iframe内的网站。
<?php require_once('include/header.php')?>
<? require('include/navigation.php') ?>
<html>
<head>
<meta charset="utf-8">
<title>Coworking Spaces</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/mystyles'); ?>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
jQuery(function(){
$("iframe").each(function(){
this.tmp = this.src;
this.src = "";
})
.parent(".website")
.click(function(){
var frame = $(this).children("iframe")[0];
console.log(frame); frame.src = frame.tmp;
});
});
</script>
</script>
</script>
</head>
<body>
<div id="container">
<div id='city_header'>
<div id='city_search'>
<h1>
Kansas City
</h1>
</div>
</div>
<div id="body">
<?php for($i = 0; $i < count($cospaces); ++$i){?>
<div class="company_box" style ="background-image: url(<?php echo($cospaces[$i]['image'])?>);">
<div class="name_box">
<h3 class="space_name"><?php echo($cospaces[$i]['name'])?></h3>
</div>
<div class="description">
<p><?php echo($cospaces[$i]['description']) ?></p>
</div>
<!-- iframe wanting to load -->
<iframe id = "website" data-src="<?php echo($cospaces[$i]['website'])?>" width="200" height="200" style="background:#ffffff"></iframe>
</div>
<?php } ?>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</div>
</body>
</html>
已测试的建议实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('iframe').bind('load', function() {
var childFrame = $(this).contents().find('iframe');
var childElement = childFrame.contents().find('body');
var src = $(this).attr('data-src');
childElement.on('click', function() {
childFrame.attr('src', src);
});
});
});
</script>
</head>
<body>
<iframe data-src="https://jsfiddle.net" srcdoc="<iframe id='hi' srcdoc='<body>Click me</body>'></iframe>">
</iframe>
</body>
</html>