使用iframe标签将目标网页内嵌在自己网页中,隐藏iframe边框和滚动条。iframe自适应内嵌网页高度。
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<iframe src="https://ranjuan.cn" frameborder="0" scrolling="no" id="external-frame" style="width:100%" onload="setIframeHeight(this)"></iframe>
<script type="text/javascript">
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
基于互联网精神,在注明出处的前提下本站文章可自由转载!
本文链接:https://ranjuan.cn/html-iframe-auto/
文章转载自染卷,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。
评论
相关阅读
只写后台管理的前端要怎么提升自己?
jinchanchanwaji
37次阅读
2025-04-09 18:30:42
《深入探秘JavaScript原型链与继承机制:解锁前端编程的核心密码》
程序员阿伟
28次阅读
2025-04-18 22:01:01
程序员如何避免被加班文化榨干身体?
jinchanchanwaji
26次阅读
2025-04-28 17:34:03
《无需操心服务器!Serverless让前端开发自动“开挂”》
程序员阿伟
23次阅读
2025-04-28 22:14:01
《解码闭包:前端开发者的进阶必修课》
程序员阿伟
21次阅读
2025-04-18 22:00:26
vue3报错TypeError: Cannot read properties of null (reading 'insertBefore')、(reading 'emitsOptions')
浮游
19次阅读
2025-05-08 10:01:02
探索Playwright:前端自动化测试的新纪元
京东云开发者
16次阅读
2025-04-23 18:43:21
《解锁SCSS算术运算:构建灵动样式的奥秘》
程序员阿伟
11次阅读
2025-05-04 23:02:34
如何将 Git 本地仓库从原远程仓库切换到新的远程仓库并提交代码
浮游
5次阅读
2025-05-09 11:23:09