調用焦點時防止 iframe 滾動父文檔

Question

我有一個調用someElement.focus的 iframe。 發生這種情況時，父級滾動以顯示 iframe。 如何防止父級滾動？ 實際上，我希望 iframe 本身滾動，以便在 iframe 內將正確的元素滾動到 iframe 本身的空間中，但父頁面應該不受影響。

 const lines = new Array(100).fill(0).map((e,i) => i).join('\\n') const script = 'script'; const frameContent = ` <style> pre { font-size: 60pt; } </style> <body> <pre>${lines}</pre> <input type="text" id="target"> </body> <${script}> document.querySelector('#target').focus(); </${script}> `; document.querySelector('pre').textContent = lines; const iframe = document.querySelector('iframe'); iframe.src = URL.createObjectURL(new Blob([frameContent], {type: 'text/html'}));

 <style> pre { font-size: 60pt; } } </style> <div>you should see this element</div> <pre></pre> <iframe></iframe> <div>you should NOT be scrolled to see this element</div>

對我來說，調用 focus 會將輸入區域移動到屏幕上是有道理的，但同時，任何隨機 iframe 都可以通過調用 focus 來讓父頁面按需跳轉到它，這對我來說毫無意義。

是否可以防止 iframe 影響父級？

Answer 1

您可以在設置焦點時嘗試傳遞選項：

document.querySelector('#target').focus({preventScroll: true});

在 HTMLElement.focus() 上的MDN 文檔中描述了preventScroll選項。

請注意，這可能僅適用於同源 iframe。

瀏覽器應用的限制可能會阻止在跨源/第三方 iframe 中使用preventScroll選項。

調用焦點時防止 iframe 滾動父文檔

問題描述

1 個解決方案

解決方案1
0 2021-11-11 02:50:46

調用焦點時防止 iframe 滾動父文檔

問題描述

1 個解決方案

解決方案1 0 2021-11-11 02:50:46

解決方案1
0 2021-11-11 02:50:46