跨域情况下如何通过 javascript 获取目标网址网页高度
在跨域的情况下,获取其他网页的高度可能有所限制。以下是一个需要考虑的示例:
<div class="page-work"> <iframe id="c_iframe" width="" height="0" scrolling="no" src="www.baidu.com"></iframe> </div>
由于父页面无法直接访问目标网页的 window 对象,因此无法直接获取其高度。要解决这个问题,可以考虑以下解决方案:
使用 postmessage api
立即学习“Java免费学习笔记(深入)”;
postmessage api 允许页面对不同域进行通信。要使用此 api,需要在目标网页和父网页中分别实现消息发送和接收功能。具体步骤如下:
const iframe = document.getelementbyid('c_iframe'); iframe.onload = () => { // 向目标网页发送消息 iframe.contentwindow.postmessage('getheight', '*'); }; window.addeventlistener('message', (event) => { if (event.origin !== 'www.baidu.com') { return; } // 接收目标网页返回的高度并设置 iframe 高度 const height = event.data; iframe.height = height; });
window.addEventListener('message', (event) => { if (event.data !== 'getHeight') { return; } // 向父页面发送网页高度 const height = document.documentElement.offsetHeight; event.source.postMessage(height, '*'); });
注意:如果无法控制目标网页,此解决方案将无法使用。此时,获取目标网页高度是不可能的。
以上就是跨域情况下,如何通过 JavaScript 获取目标网页的高度?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号