web标准与document.body.clientHeight

最新推荐文章于 2021-10-31 01:45:00 发布
最新推荐文章于 2021-10-31 01:45:00 发布
阅读量1k 收藏
点赞数
分类专栏： javascript 文章标签： web xhtml html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/engzs/article/details/1470652
版权

网页加了这么一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
document.body.clientHeight就不可用,解决方法如下:

在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0 

由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
doctype后如何获得body.clientHeight的方法
10-30
- **`document.documentElement` 与 `document.body` 的区别**：在标准模式下，`document.documentElement` 指的是 `<html>` 元素，而 `document.body` 指的是 `<body>` 元素。这两个元素在不同情况下存储着不同的...
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 228
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则documen...
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 516
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3318
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
body.clientHeight与documentElement.clientHeight
weixin_34116110的博客
10-08 154
body上的clientHeight会对着内容区域的高度变化而变化，当内容只有100px，则body上只有100px被撑起，返回的clientHeight为100； documentElement.clientHeight:不会随着内容区域的变化而变化，始终是窗口的可见区域大小。 转载于:https://www.cnblogs.com/lydialee/p/4860978.htm...
document.body.clientHeight
weixin_33835690的博客
03-03 223
document.body.clientWidth ==&gt; BODY对象宽度（也是可见区） document.body.clientHeight ==&gt; BODY对象高度（也是可见区） document.documentElement.clientWidth ==&gt; 可见区域宽度 document.documentElement.clientHeight ==&gt; 可见...
document.compatMode介绍
09-06
在Quirks Mode下，IE和其他一些早期浏览器的行为可能会导致元素的尺寸、定位和布局与标准模式有所不同，特别是在处理盒模型时。 `document.compatMode` 就是用来检测当前文档是在使用哪种渲染模式。如果值为 "CSS1...
关于window.pageYOffset和document.documentElement.scrollTop
09-05
在Web开发中，特别是在处理页面滚动事件时，`window.pageYOffset` 和 `document.documentElement.scrollTop` 是两个非常重要的属性。它们都是用来获取用户在浏览器窗口中滚动的位置，即浏览器视口距离文档顶部的距离...
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
11-23
windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll ){ pageHeight = windowHeight; } else { pageHeight = yScroll; } ...
React开发（235）:document.body.clientHeight
歌谣的博客
10-31 408
document.body.clientHeight获取可视化高度
document.body.clientHeight高度问题
hello world
09-14 1699
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大 经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight
document.body.clientHeight的取值
weixin_34273479的博客
11-12 174
[JS]document.body.clientHeight的取值 有时候需要取页面的底部, 就会用到document.body.clientHeight, 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hell...
让body的clientHeight与html的clientHeight相等的方法
dayanwu2842的博客
05-03 125
body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的 从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等 测试代码如下： ...
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
菜鸟史
02-25 366
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
document.body.scrollTop,document.body.clientHeight的值为0的问题
Huakmel的专栏
03-17 1336
在写个漂浮广告时遇到document.body.scrollTop和document.body.clientHeight为零的问题，在网上找到了原因：是因为html/jsp文件头部加了文档类型。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">解决办法可以有
offsetHeight, clientHeight与scrollHeight的区别
liyanfang19的专栏
03-09 405
clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
mstsc.js web远程桌面
最新发布
02-06
### 使用 `mstsc.js` 实现 Web 远程桌面连接 为了实现在 Web 浏览器中通过 RDP 协议访问远程桌面的功能，可以利用纯 JavaScript 编写的客户端库 `mstsc.js`。此库允许开发者创建基于浏览器的 RDP 客户端应用。 #### 准备工作环境 首先需安装必要的依赖项，包括但不限于 Node.js 和 npm（Node Package Manager）。接着可以通过命令行工具克隆 `mstsc.js` 的仓库到本地开发环境中： ```bash git clone https://gitcode.com/gh_mirrors/ms/mstsc.js.git cd mstsc.js npm install ``` #### 配置服务器端支持 考虑到安全性以及跨域资源共享(CORS)等问题，在实际部署时通常还需要配置一个代理服务器来转发请求给目标机器上的 RDP 服务[^2]。对于这一部分的工作，可以选择使用 Express 或其他适合做反向代理的服务框架构建中间件层，并确保其能够正确解析并传递来自前端页面发出的数据包至对应的 Windows Server 上运行着的终端服务进程。 #### 创建简单的 HTML 页面调用 API 接口 下面是一个简化版的例子展示怎样在一个网页里加载 `mstsc.js` 并建立同远端主机之间的会话链接: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Web RDP Client</title> <script src="./path/to/mstsc.min.js"></script><!-- 引入编译后的 js 文件 --> <style type="text/css"> body { margin:0; padding:0 } canvas{ width:100%; height:95vh;display:block;} </style> </head> <body onload="connect()"> <canvas id="rdpCanvas"></canvas> <script> function connect(){ let rdpClient = new MsTscAx({ host:'your_remote_host_ip', // 替换成你要连接的目标 IP 地址 port: '3389', username: "domain\\user",// 用户名格式为 domain\user 形式 password:"YourPasswordHere", width: window.innerWidth, height: document.getElementById('rdpCanvas').clientHeight }); document.getElementById('rdpCanvas').appendChild(rdpClient.getNativeElement()); } </script> </body> </html> ``` 上述代码片段展示了如何初始化一个新的 `MsTscAx` 对象实例化参数设置好之后再将其挂载到指定 DOM 节点下以便渲染图形界面。 需要注意的是，出于安全考虑，真实场景下的密码不应硬编码在源码之中；而是应该采取更稳妥的方式比如 OAuth 认证机制让用户输入凭证信息后再发起认证流程获取临时令牌用于后续操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值