在模态弹出框+ iframe中显示时的外部网站/图像大小

Question

在我的网站上,当点击链接时,我需要显示一个模态弹出窗口(参见此解决方案):

• 有时会显示一个外部网站(下面链接#1)
• 有时只显示JPG图像(下面链接#2)

问题:显示时:

1. 模态弹出窗口中的外部网站,大小合适(参见链接#1)

2. 在模态弹出窗口中的jpeg图像,大小不正常,从某种意义上说它不适应屏幕(参见链接#2):

3. jpeg图像在新窗口中,大小合适,自动适应屏幕(参见链接#3)

问题:如何使用模态弹出窗口显示的JPG图像iframe自动调整其大小,即如果JPG的高度很高,它会自动调整大小？即与在新窗口中显示图像时完全一样(参见链接#3)

PS:尝试使用此代码段时,不要忘记在浏览器中启用加载不安全脚本.如果不是,则不会显示iframe.

或者使用这个现场演示jsfiddle.

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;
}

#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; }

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

Answer 1

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

\n\n

<div id="popup">\n    <iframe id="popupiframe"></iframe>\n    <img id="popupimg"></img>\n    <div id="popupclose">\xe2\x9d\x8c</div>\n</div>\n<div id="popupdarkbg"></div>\n

\n\n

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

\n\n

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

\n\n

注意：它使用endsWith。

\n