前言

• 若依(ruoyi)： v4.3
• 360極速瀏覽器 12.0.1550.0 (正式版本) （32 位）
• 操作系統 Windows 10 OS Version 2004 (Build 19041.572)
• JavaScript V8 7.8.279.23
• jQuery v2.1.4

mainContent

下圖紅框部分是mainContent。

獲取mainContent的寬高

mainContent 中嵌入了 iframe。mainContent 的 id 為 content-main。

<div class="row mainContent" id="content-main"><iframe class="office_iframe" name="iframe0" width="100%" height="100%" data-id="/system/main"th:src="@{/system/main}" frameborder="0" seamless></iframe> </div>

獲取 mainContent 的寬高分為兩種情況：

• 如何在本頁獲取 mainContent 的寬高
• 如何在iframe框架內獲取 mainContent 的寬高

這兩種情況獲取 mainContent 的寬高的代碼差不多。先看看如何在本頁獲取 mainContent 的寬高，代碼如下：

let mainContent = $('#content-main'); console.log('mainContent 的寬：{}', mainContent.width()); console.log('mainContent 的高：{}', mainContent.height());

在iframe框架內獲取 mainContent 的寬高代碼很類似，只需要提供一下context的指向，讓context指向父頁面的DOM（window.parent.document）。

let mainContent = $('#content-main', window.parent.document); console.log('mainContent 的寬：{}', mainContent.width()); console.log('mainContent 的高：{}', mainContent.height());

參考

JS/jQuery–iframe框架內外元素的操作
父頁面獲取子頁面DOM： window.frames['iframe-name'].document
子頁面獲取父頁面的DOM： window.parent.document

總結

以上是生活随笔為你收集整理的【若依(ruoyi)】获取mainContent的宽高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。