当前网站: enter image description here
我有一个网站，它是通过使用 php 和 mysql 调用我的数据库的 for 循环生成的。我有一个 ID、姓名、公司网站、地址和图像。它目前显示的名称、描述和图像都显示在堆叠的方框中。
单击该框后，我尝试加载公司网站的 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>
最佳答案
我没看到哪里this.src在 PHP 为您的初始 .each 生成的 iframe 中定义函数调用。
我也不确定你为什么调用 .parent('.website') ，因为那会向上遍历寻找带有 class="website" 的包装元素，其中 PHP 生成的 iframe 除了带有 id="body" 的 div 之外没有父级.
例如，您的代码正在寻找:
<div class="website">
<iframe></iframe>
</div>
使用 iFrame 时要记住的一件事是，它们的内容在 DOMReady 上不可用，因此您必须为每个要修改其内容的 iFrame 附加一个加载监听器。
如果我没理解错的话，您只需要 src当用户单击 iframe 时要加载的 iframe。你试过类似的东西吗
jQuery(function($) {
$('iframe').on('click', function(e) {
var frame = $(this);
frame.attr('src', frame.attr('data-src'));
frame.off('click'); //remove on-click event to prevent reloading on click
});
});
iFrame 目标非常小，只有在单击 iFrame 的外边框时才会触发 click 事件，而不是其内容主体。 iFrame 不像 <div>与 DOM 事件相关的元素或其他 block 元素，并且里程会因您可以在每个浏览器和每个版本中执行的操作而有所不同。
除非您试图在 Coworking Spaces 创建的 iframe 中找到 iframe 并更改它们的源，否则使用 Javascript 是不可能的，除非子 iframe 位于同一域中。请参阅:Same Origin Policy
否则你可以做类似的事情
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);
});
});
});
这将告诉您的脚本等待每个主 iframe 加载，找到其子 iframe，将 onclick 事件附加到子 iframe 主体以将源设置为主 iframe data-src
示例:https://jsfiddle.net/Laomfx7g/
我使用 srcdoc属性将静态 HTML 加载到 iFrame 中以演示绑定(bind)到同源内容，因为我无法从 jsfiddle 编辑外部网站的源内容。
最后，元素 ID(特别是 for 循环中的 <iframe id="website")应该是唯一的，并且在不同的浏览器中功能会大不相同。有些只会影响具有指定 id 的第一个元素，有些会影响最后一个，其中一些会读取所有指定的 id，这可能是有意的，也可能不是有意的。
编辑 - 来自评论说明
jQuery(function($) {
$('.description').on('click', function() {
var frame = $(this).next('iframe');
frame.attr('src', frame.attr('data-src'));
$(this).off('click'); //remove click event
});
});
关于javascript - 在点击数据库中的网站时在 iframe 中加载点击 ID 的网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37427643/