Question

我希望通过点击它（正常大小）动态加载全屏图像。

所以我有

CSS

.full-image {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

JS

$(document).ready(function() {
    $('img').on("click", function() {
        var img = $(this);
        var myWindow = window.open("img.html");
        var src = img.attr('src');
        var document1 = myWindow.document;
        $(myWindow.document).ready(function() {
            alert();
            $(myWindow.document).contents().find('#image').attr('src', src);
        });
    });
});

我在每个变体中尝试了这个answered question`，但我实现的最佳结果是粘贴的javascript代码：打开新窗口，只有在按下警报后，才会在新窗口中加载图像。

我将图像加载到同一个窗口中，但是obv添加＆＃34; _self＆＃34;不起作用。

新的html页面就像这个<img id = "image" class = "full-image"/>

感谢。

Answer 1

我想我知道你要求的是什么。这是一个解决方案。

将图像包裹在普通a标记中。将href设置为/img.html?src=x，其中x是img src。

在img.html上，有一些Javascript来从URL中获取值（这是在Stack上执行此操作的方法），然后将该页面上的img src设置为该值。

JsFiddle不是理想的，因为它是一个单页的东西，但我试图告诉你它是如何工作的here。选择器需要稍微调整。

如何在window.open之后操纵DOM元素（＆＃34; _self＆＃34;）

1 个答案: