Question

我在网页中使用了两个按钮（http://localhost:8088/hse/public/explorer）：

并且那些按钮将打开一个新的弹出窗口：（http://localhost:8088/hse/public/explorer/1）

onClick="MyWindow=window.open('http://localhost:8088/hse/public/explorer/1','MyWindow',width=300,height=200); return false;">Show Map</button>

单击此按钮将打开一个新的弹出窗口，在弹出窗口内，会有一些HTML链接，我想当用户点击任何一个链接时，弹出窗口关闭，并且该链接在同一个父窗口打开页面但不同的网址（http://localhost:8088/hse/public/explorer/show/1）

Answer 1

试试这个。

当您运行“代码段”时，这不会起作用...创建一个文档并在那里使用它。

document.getElementById("button").onclick = evt => {
    
    window.open(window.location.origin + "/hse/public/explorer/1", "MyWindow", "width=300, height=200");
}

<button id="button">Open new window</button>

<强>更新

尝试这样做而不是下面描述的内容。这将做同样的事情，但实际上有意义使用。如果你想创造一些确保用户友好的东西。

var id_button     = document.getElementById("button"),
    id_container  = document.getElementById("container");

id_button.onclick = evt => {
    // show or hide container
    if (id_container.classList.contains("hide")) {
        
        id_container.classList.remove("hide");
    } else {
        
        id_container.classList.add("hide");
    }
}

// add onclick-function for every child of "id_container"
for (var i = 0; i < id_container.childElementCount; i++) {
    
    var child_element = id_container.children[i];
    
    child_element.onclick = evt => {
        
        // check that the element is a "a"-element
        if (evt.target.localName == "a") {
        
            window.open(window.location.origin + evt.target.getAttribute("data-link"), "_blank");   
        }
    }
}

.container {
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
}
.hide {
    display: none;
}

<button id="button">Show/hide all links</button>
<br><br>
<div id="container" class="container hide">
  <a href="javascript:void(0);" data-link="/hse/public/explorer/1">Link1</a>
  <br>
  <a href="javascript:void(0);" data-link="/hse/public/explorer/2">Link2</a>
  <br>
  <a href="javascript:void(0);" data-link="/hse/public/explorer/3">Link3</a>
</div>

MyWindow = window.open使用弹出窗口并返回父页面

1 个答案: