iframe框根据内容自适应高度(100%可用)

简介: iframe框根据内容自适应高度(100%可用)

iframe框根据内容自适应高度(100%可用)

HTML:

<iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe>

script:

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#iframe").height(0); //用于每次刷新时控制IFRAME高度初始化 
            var height = $("#iframe").contents().height() + 20;
            $("#iframe").height(height < 800 ? 800 : height); //最小的高度700
        }
    </script>

在不显示滚动条的方式支持【滚轮】拉动。

相关文章
|
移动开发 前端开发 JavaScript
HTML - Canvas 使用画布旋转文本
HTML - Canvas 使用画布旋转文本
434 0
HTML - Canvas 使用画布旋转文本
lodash判断对象的属性是否存在
lodash判断对象的属性是否存在
688 0
|
JavaScript 前端开发
JS实现一键复制、选中复制、选中多行复制
文章介绍了如何使用JavaScript实现一键复制文本、选中文本复制以及选中多行文本复制的功能。提供了详细的代码示例,包括创建临时textarea元素、选中文本、执行复制命令、用户提示以及清理临时元素的完整流程。同时,还考虑了用户可能选中多行文本进行复制的情况。
612 0
|
10月前
|
设计模式 前端开发 数据安全/隐私保护
前端必须掌握的设计模式——代理模式
代理模式(Proxy Pattern)是一种结构型设计模式,通过引入“替身”对象来间接访问真实对象,从而解耦并提升性能和安全性。例如,知名艺人复出后,经纪人作为代理筛选商单,确保只处理符合团队利益的请求。代码实现中,定义接口`IService`,艺人和经纪人都实现该接口,经纪人在访问时进行过滤和转发。代理模式常用于权限控制、性能优化等场景,如前端中的Tree-shaking和ES6的Proxy构造方法。
前端必须掌握的设计模式——代理模式
|
设计模式 算法 关系型数据库
|
存储 JavaScript
Vue中如何在组件销毁时清理定时器?
Vue中如何在组件销毁时清理定时器?
507 1
|
JavaScript 前端开发 Java
html页面导出为pdf(jsPDF、iText、wkhtmltopdf)
html页面导出pdf,本来是一件很简单的事情,在浏览器直接打印(Mac快捷键为⌘+p;Windows快捷键为ctrl+p),就可以把页面另存为pdf文件,但对于要经常把页面导出为pdf的用户来说并不友好,一个合格程序员的标准就是:做出来的软件猪都要会用,否则你就是猪。 调研了几种html导出pdf的实现方式,这里把要点记录下来分享下。
html页面导出为pdf(jsPDF、iText、wkhtmltopdf)
|
JavaScript
Vue中如何实现单例模式的组件?
Vue中如何实现单例模式的组件?
924 0
|
JavaScript 算法 前端开发
解密Vue 2的Diff算法:如何实现高效的DOM更新?
解密Vue 2的Diff算法:如何实现高效的DOM更新?
|
应用服务中间件 nginx Web App开发