javascript - 在 codepen 上全屏查看时无法更新从 API 获取的数据

Question

可能我正在处理一个错误，但请看一下!这是我的 pen .

但是当我更改为完整页面 View 时，该功能无法正常工作。一切正常，但全名标题不正常!

也许有什么想法？

        .then(
        (data) => {
            img.src = data.picture.large
            image_title.innerHTML = data.name.first
            name.innerHTML = `${ data.name.title } ${ data.name.first } ${ data.name.last }`
            sex.innerHTML = ` ${ data.gender }` 
            if(data.gender === 'male') {
                console.log('boy')
                container.style.background = "#20232A"
            }else {
                console.log('girl')
                container.style.background = "#009688";
            }
            age.innerHTML = ` ${ data.dob.age }`
            city.innerHTML = ` ${ data.location.city }`
            post.innerHTML = ` ${ data.location.postcode }`
            state.innerHTML = ` ${ data.location.state }`
            country.innerHTML = ` ${ data.nat }`
            email.innerHTML = ` ${ data.email }`
        }
    )

Answer 1

问题是您在全局范围内声明了很多变量，特别是其中一个称为“名称”。符号“名称”绑定(bind)到 window对象已经作为窗口的名称。声明

const name = infos.querySelector("#full-name");

不按照人们的想法行事。看起来它应该绑定(bind)变量 name到 <h2>元素;事实上，它所做的是将窗口名称设置为字符串“[object HTMLHeadingElement]”(可能因浏览器而异)。

在我看来，修复它的最佳方法是通过将所有代码包装在一个虚拟 IIFE 中来净化所有代码。添加

(function() {

在现有的第一行之前

})();

在最后一行之后，它起作用了，因为所有代码现在都在一个新的私有(private)范围内，没有任何内容与 window 冲突。特性。如果您将变量从“name”更改为“xname”或任何其他不与内置浏览器符号冲突的变量，它也有效。

为什么它在 Codepen“编辑器” View 中有效？我不知道这个问题的“深层”答案，但在编辑器 View 中，您的笔创建的页面隐藏在 <iframe> 中。元素。现在 <iframe>元素确实有一个“名称”属性，但神秘的是你的声明 name常数被允许遮蔽它。在“全屏” View 中，您的页面是实际的顶级窗口，在那种情况下 window.name不会让自己被遮蔽。