【发布时间】：2016-09-22 11:56:27
【问题描述】：
当前网站： enter image description here
我有一个网站，它是通过使用 php 和 mysql 调用我的数据库的 for 循环生成的。我有身份证、姓名、公司网站、地址和图片。它目前显示名称、描述和图像，所有这些都显示在堆叠的方形框中。
单击该框时，我正在尝试加载公司网站的 iframe，然后覆盖该框。当我加载网站时，我已经能够加载所有网站 iframe，但如果有超过 5-6 行数据，则网站加载速度非常慢，因为它正在加载大约 7 个网站。
我大部分时间都在查看 jquery 和 iframe 问题，但仍然无法让我的 iframe 在您单击该框时单独加载。我的意图是让用户点击描述/公司框而不是 iframe。然后，这将加载 iframe 并将其显示在公司框上，并在其中填充/隐藏框中的内容，完全覆盖框内容。
如何加载在 iframe 中打开的网站 onclick 而不加载动态生成的页面内的所有 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>
【问题讨论】：
-
真正的问题是什么？
-
如何加载在 iframe 中打开的网站 onclick 而不加载动态生成的页面内的所有 iframe。 （我也用这个更新了问题。）
标签： javascript php jquery html iframe