已解決430363個問題，去搜搜看，總會有你想問的

檢測用戶啟動的元素大小調整（與文檔流大小調整不同）

首頁猿問檢測用戶啟動的元素大小調整（與文檔...

檢測用戶啟動的元素大小調整（與文檔流大小調整不同）

Html5

12345678_0001 2023-10-17 14:54:47

我希望 iframe 能夠水平占用所有可用空間，并自動垂直調整自身大小以適應其內容（包括內容更改或窗口大小調整），但也可由用戶使用 CSS 屬性手動調整大小resize: both。目的是嵌入設計，默認情況下填充可用空間，但也讓用戶看到它在不同屏幕尺寸下的工作方式。iframe 是同源的，所以不存在安全問題——父窗口可以對iframe.contentDocument.自動調整 iframe 大小以適應其內容非常簡單：<iframe srcdoc="<h1>The quick brown fox jumps over the lazy doggerel." style="width:calc(100% - 2px);border:1px solid black" onload=" recalculate = () => { this.style.height = this.contentDocument.documentElement.offsetHeight + 'px'; } new ResizeObserver(recalculate).observe(this.contentDocument.documentElement); recalculate();"></iframe>（哇，HTML 語法突出顯示真的崩潰了！此外，這里沒有正確的“片段”，因為 CSP 似乎中斷了contentDocument訪問。）制作用戶可調整大小的 iframe 非常簡單：<iframe srcdoc="<h1>The quick brown fox jumps over the lazy doggerel." style="resize:both"></iframe>…但是這些技術并不能很好地結合起來，因為用戶調整大小的方式與由于窗口大小變化等原因調整大小的方式相同，所以一旦用戶調整大小，自動高度代碼就會啟動并忽略他們剛剛指定的高度。因此，如果用戶手動調整 iframe 的大小，我希望自動調整大小能夠斷開 ResizeObserver 的連接。有什么方法可以區分由于用戶操作（通過角夾調整 iframe 大?。е碌恼{整大小和由于環境變化（iframe 內的內容更改，或沒有 iframe 的布局更改，包括視口調整大?。е碌恼{整大?。?

查看完整描述

1 回答

絕地無雙

TA貢獻1946條經驗獲得超4個贊

當您手動調整大小時，element.style.{width, height}請進行設置。因此，自動調整大小的一種解決方案是不使用這些屬性，而是以其他方式設置寬度和高度，以便您可以區分這些值。

對于width，這很簡單，因為自動調整大小僅設置height：如果width設置了（或者，如果設置了類似的值calc(100% - 2px)，則設置為其他值），則斷開自動調整大小。

為了身高？這更難，但我想到了兩種技巧：

在單獨的樣式表中設置高度（以便element.style.height根本不設置），并繼續更新該樣式元素的文本。
使用height: var(--height), 并將其設置--height為實際值。除非用戶調整大小，否則這種方式element.style.height不會改變。我推薦這種技術，因為它更容易推理，而且我懷疑它可能會更快一點（盡管我根本沒有測試過）。

<style>

iframe {

width: calc(100% - 2px);

border: 1px solid black;

resize: both;

}

</style>

style="height:var(--height)"

onload="

recalculate = () => {

// (var(--height) could just as easily be shifted to the stylesheet,

// but I’m demonstrating a point here in how it can be done.)

if (this.style.width || this.style.height !== 'var(--height)') {

// User resizing has occurred.

if (observer) {

observer.disconnect();

}

return;

}

this.style.setProperty('--height', this.contentDocument.documentElement.offsetHeight + 'px');

}

var observer = window.ResizeObserver && new ResizeObserver(recalculate);

if (observer) {

observer.observe(this.contentDocument.documentElement);

}

recalculate();

"></iframe>

反對回復 2023-10-17

1 回答
0 關注
101 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

檢測用戶啟動的元素大小調整（與文檔流大小調整不同）

檢測用戶啟動的元素大小調整（與文檔流大小調整不同）

1 回答

添加回答