首頁猿問檢測用戶啟動的元素大小調整（不同于...

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

JavaScript

侃侃無極 2022-06-05 16:05:27

我想要一個 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 的大?。┒鴮е碌恼{整大?。╥frame 內的內容更改，或沒有 iframe 的布局更改，包括視口調整大?。?？

查看完整描述

1 回答

三國紛爭

TA貢獻1804條經驗獲得超7個贊

當您手動調整大小時，請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>

反對回復 2022-06-05

1 回答
0 關注
108 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

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

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

1 回答

添加回答