时间戳

首页 > 解决方案 > window.open() 仅适用于输入类型，但不适用于标签？

javascript - window.open() 仅适用于输入类型，但不适用于标签？

问题描述

我正在尝试使用 window.open() 打开一个带有标签的新窗口，但它似乎不起作用。我是编程新手，所以我遇到了很多困难，尤其是这个并没有让我找到解决方案。谁能告诉我我做错了什么？

javascript
var grid2Btn = document.getElementsByClassName('grid2__btn__container');
grid2Btn.addEventListener('click', function(){
    window.open('https://www.google.com/','google', 'top=100,left=100,width=300,height=400');
})

html
<button class="grid2__btn__container">
          <span><img class="magnifier" src="au-logos/search.png" alt="magnifier">click here<span class="new__window__logo"></span></span>
</button>

标签： javascripthtmlwindow.open

解决方案

document.getElementsByClassName()返回元素的集合。

你可以知道：

  • 通过检查文档

  • 通过检查其实际输出

    const elements = document.getElementsByClassName('grid2__btn__container');
console.log(elements);

  • 读取方法名：get Elements ByClassName()。

因此，只需获取结果的第一个数组元素，然后向其添加事件侦听器。

const elements = document.getElementsByClassName('grid2__btn__container');

// Take the first element
const grid2Btn = elements[0];

grid2Btn.addEventListener('click', function() {
    alert('Button clicked');
    window.open('https://www.google.com/','google', 'top=100,left=100,width=300,height=400');
});
<button class="grid2__btn__container">
          <span><img class="magnifier" src="au-logos/search.png" alt="magnifier">click here<span class="new__window__logo"></span></span>
</button>

推荐阅读