前言

• 若依(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的宽高的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。