javascript - window.open ("_self"之后如何操作 DOM 元素)

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 代码中:新窗口打开，只有在按下警报后，图像才会加载到新窗口中。

我想在同一个窗口中加载图像，但是添加“_self”不起作用。

新的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 .选择器需要稍作调整。