以模态方式将 Iframe 适合图像

Question

我尝试了很多选项，但没有任何效果。 在my website 上单击任何帖子，使用wordpress single.php 在模态框中打开一个iframe（使用Featherlight.js）

问题是我无法将模态框适合里面的图像，到目前为止我只是决定将尺寸放入 html 代码中。

<div id="post">
<a href="#" data-featherlight="#featherlight-<?php echo get_the_ID(); ?>"> 

        <?php
        if ( has_post_thumbnail() ) {
        the_post_thumbnail('post-thumbnails');
        }
        ?>  

    </a>

<div class="myframe">
<iframe class="lightbox" src="<?php the_permalink(); ?>" width="400" height="600" id="featherlight-<?php echo get_the_ID(); ?>" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

</div>

您认为可以使用 javascript 或 jquery 吗？ 我只知道 html、css 和一点 php，但如果我必须...

谢谢！

Answer 1

如果我理解正确，您将 Featherlight 用作“灯箱”，并且当该框打开时，您希望将框调整为与其中的图像相同的大小。

所以基本上你想做的是：

1. 添加在灯箱打开后触发的代码
2. 让该代码检查图像的尺寸
3. 将<iframe> 的尺寸更新为图片的尺寸

如果我有这个权利，那么棘手的部分（尤其是如果您是 Web 开发新手）是您需要了解所有 Web 开发都围绕“文档”（网页）进行，并且当您使用任何框架时，您会绕有多个“文档”：一个用于具有<iframe> 的父级，一个用于该<iframe> 内的页面。

因此，首先您需要编写将在灯箱打开时触发的逻辑。您必须阅读 Featherlight 的文档，看看它是否为您提供了一个“钩子”。如果不是，您将不得不添加您自己的“onClick”逻辑，当用户单击以打开灯箱时会发生该逻辑。如果您执行后者，您可能需要使用 window.setTimeout 等待一两秒钟，以便 Featherlight 创建 <iframe>。

一旦触发该逻辑，它将需要等待 <iframe> 加载。您可以通过将 onLoad 事件处理程序附加到 iframe（来自您的 onClick 处理程序）来执行此操作。当触发该处理程序时，<iframe> 将被加载，您可以检查图像的大小。

要实际访问 <iframe> 文档，请参阅此 SO：Accessing the document object of a frame with JavaScript。

完成此操作后，您可以访问图像（类似于 iframeDocument.getElementsByTagAndClassName('img')[0]，如果页面上只有一张图像）并检查它的 height 和 width CSS 属性。

最后，一旦你改变了<iframe> 的height 和width CSS 属性，你就应该准备好了。