阻止iframe加载后自动滚动 ​

  • 原因： iframe加载完成后，会自动聚焦页面，导致页面滚动。

  • 解决： 默认隐藏 iframe，当 iframe 挂载后移除焦点，同时监听其加载完成事件。在加载完成后，将 isLoad 设置为 true 以显示 iframe。

html
<div v-show="isLoad">
  <iframe ref="iframeRef" src="https://www.baidu.com" @load="iframeLoad"></iframe>
</div>
<script setup>
  const isLoad = ref(false);
  const iframeRef = useTemplateRef("iframeRef");

  function iframeLoad() {
    isLoad.value = true;
  }
  onMounted(() => {
    iframeRef.value?.blur();
  });
</script>
如何阻止iframe自动聚焦导致页面滚动https://blog.ddlyt.top/posts/2025/0617
作者兜兜里有糖
发布于6/17
更新于今日内
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
html前端vue
反馈与投诉
评论 隐私政策