点击同页a标签加载iframe不同网页时lazyload属性是否保留？

1. iframe属性保留问题 #

会全程保留。点击a标签仅会修改iframe的内部资源加载地址，不会改变iframe这个DOM元素本身的固有属性，你提前为iframe设置的loading="lazy"、allow等自定义属性都挂载在元素上，加载新页面的过程不会触发属性修改，因此所有属性都会持续生效。 #

2. Chrome DevTools查看lazyload生效的位置 #

• 优先看网络（Network）面板：打开DevTools切换到Network面板，顶部筛选器选择「iframe」类型，刷新页面后观察对应iframe的请求时机：如果iframe未进入视口时没有发起资源请求，滚动到视口附近才触发请求，说明lazyload正在生效。
• 辅助验证可以用元素（Elements）面板：选中目标iframe元素，右侧切换到「Properties（属性）」 tab，找到loading属性，确认值为lazy，说明属性已被浏览器正确识别。

3. 点击底部链接自动跳转到iframe位置的实现 #

完全不使用JavaScript的原生HTML方案无法同时实现「在iframe加载新页面」和「父页面跳转锚点」两个动作，推荐用极简的JS代码实现：
首先给iframe加个方便选择的标识，比如id：

<iframe name="myiframe" id="myiframe" loading="lazy" allow="accelerometer; gyroscope;"></iframe>

然后给所有绑定iframe的a标签加点击监听即可：

document.querySelectorAll('a[target="myiframe"]').forEach(link => {
  link.addEventListener('click', () => {
    // 滚动到iframe位置，behavior: 'smooth'可以开启平滑滚动，不需要可以删掉
    document.getElementById('myiframe').scrollIntoView({behavior: 'smooth'})
  })
})

内容的提问来源于stack exchange，提问作者thereiswaterinthecup