Question

在我的网站上，点击链接时，我需要显示模式弹出（另请参阅this solution）：

有时会显示一个外部网站（下面链接＃1）
有时只显示JPG图片（下面链接＃2）

问题：显示时：

模态弹出窗口中的外部网站，大小合适（参见链接＃1）
模式弹出窗口中的jpeg图片，尺寸不合适，从某种意义上说它不适应屏幕（参见链接＃2）：

新窗口中的jpeg图片，大小合适，自动适应屏幕（参见链接＃3）

问题：如何使模式弹出窗口中显示的JPG图像iframe自动调整其大小，即如果JPG的高度很高，那么＆＃39 ; s自动调整大小？即与在新窗口中显示图像时完全相同（参见链接＃3）

PS：尝试此代码段时，不要忘记在浏览器中启用加载不安全脚本。如果没有，则不会显示iframe。

或使用此实时演示jsfiddle。

＆＃13;

document.getElementById("link1").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "http://example.com";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link2").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "https://i.imgur.com/pz2iPBW.jpg";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link3").onclick = function(e) {
  window.open('https://i.imgur.com/pz2iPBW.jpg', 'newwindow', 'width=700,height=500'); 
  e.preventDefault();
  return false;
}

＆＃13;

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

＆＃13;

<div id="main">
<a href="" id="link1">Click me (website, modal popup)</a><br>
<a href="" id="link2">Click me (jpg image, modal popup)</a><br>
<a href="" id="link3">Click me (jpg image, new window)</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

＆＃13;

Answer 1

如果您需要将图像调整到<iframe>窗口，则必须应用一些CSS样式或通过JavaScript设置图像尺寸。但在这种情况下，图像是从不同的域提供的，因此您无法访问<iframe>的内容。

在这种情况下，即使图像不是来自不同来源，最好的方法是为图像制作一个html页面，并在<iframe>中加载该html页面。

<强> image-preview.py

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%}
            img{
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <img src="https://i.imgur.com/pz2iPBW.jpg" alt="">
    </body>
</html>

您可以使用url中的get参数http://yourdomain.com/image-preview.py?src=https://i.imgur.com/pz2iPBW.jpg。

使其动态化

Answer 2

如果您只需要从其他网站加载图片，则可以<img/>使用width:100; height: auto;应答加载。{/ p>

您可以在其他活动中保留网站的iframe弹出窗口。当然，您可以检测要显示的内容（img / website）并显示相应的弹出窗口。

以下是fiddle

Answer 3

您是说有时需要在iframe中显示图片吗？

如果没有iframe，可以使用background-image：

来实现这一目标

https://jsfiddle.net/um2799fu/8/

Answer 4

您只能使用宽度

width: 100%;

Before using width: 100%; After using width: 100%;

Answer 5

我尝试了很多解决方案，但最后最简单的方法是使用iframe和img（其中只有一个在精确时间使用，另一个是空的）：

<div id="popup">
    <iframe id="popupiframe"></iframe>
    <img id="popupimg"></img>
    <div id="popupclose">❌</div>
</div>
<div id="popupdarkbg"></div>

并使用JavaScript检查URL是否为图像：

var url = this.getAttribute('href');
if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.png')) {
    document.getElementById('popupimg').src = url;
    document.getElementById('popupimg').style.display = "block";
    document.getElementById('popupiframe').style.display = "none";
} else {
    document.getElementById('popupiframe').src = url;
    document.getElementById('popupimg').style.display = "none";
    document.getElementById('popupiframe').style.display = "block";
  }

注意：它使用endsWith。

以模态弹出框+ iframe

5 个答案: