Question

我有一个网站，它是通过使用php＆amp; amp;来调用我的数据库的for循环生成的。 MySQL的。我有一个id，姓名，公司网站，地址和图片。它当前显示的名称，描述和图像均以堆叠的方框显示。

点击该框后，我正在尝试加载公司网站的iframe，然后覆盖该框。我在加载网站时能够加载所有网站iframe，但如果有超过5-6行数据，网站加载速度非常慢，因为它正在加载~7个网站。

我花了一天的大部分时间来查看jquery和iframe的问题，但是当你点击这个框时，仍然无法单独点击加载我的iframe。我的目的是让用户点击描述/公司框而不是iframe。然后，这将加载iframe，并将其显示在公司框中，在框中填充/隐藏框中内容完全覆盖框内容。

如何加载在iframe中打开的网站，而不加载动态生成的页面中的所有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>

TESTED建议实施：

<!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>

Answer 1

我没有看到在{1}}函数调用的PHP生成的iframe中定义this.src的位置。

我也不确定你为什么要调用.each，因为那会向上移动寻找一个包含.parent('.website')的包装元素，其中PHP生成的iframe除了div之外没有其他父类class="website" 1}}。例如，您的代码正在寻找：

id="body"

使用iFrame时要记住的一件事是，他们的内容在DOMReady上不可用，因此您必须将加载侦听器附加到要修改其内容的每个iFrame。

如果我理解正确，您只需在用户点击iframe时加载iframe的<div class="website"> <iframe></iframe> </div>即可。你尝试过像

这样的东西吗？

src

iFrame目标非常小，只会在点击iFrame的外边框而不是其内容主体时触发click事件。对于DOM事件，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 }); });元素或其他块元素，里程数会因浏览器和每个版本的不同而不同。

除非您尝试在Coworking Spaces创建的iframe中找到iframe并更改其来源，否则使用Javascript是不可能的，除非子iframe位于同一个域中。请参阅：Same Origin Policy

否则你可以做类似

的事情

<div>

这将告诉您的脚本等待加载每个主iframe，找到其子iframe，将onclick事件附加到子iframe主体以将源设置为主iframe 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); }); }); });

示例：https://jsfiddle.net/Laomfx7g/

我使用data-src属性将静态HTML加载到iFrame中以演示对同源内容的绑定，因为我无法从jsfiddle编辑外部网站的源内容。

最后，元素ID（在你的for循环中具体为srcdoc）应该是唯一的，并且在不同的浏览器中功能会大不相同。有些只影响具有指定id的第一个元素，其他元素将影响最后一个元素，其中一些将读取所有指定的id，这可能是也可能不是。

编辑 - 来自评论澄清

<iframe id="website"

示例：https://jsfiddle.net/2x0yfpts/

在Clickrame中点击用于数据库中的网站加载Clicked Id的网站

1 个答案: