当前位置:首页 > 网站运营 > 正文内容

iframe高度自适应的一个方法

葱子7年前 (2017-09-20)网站运营1226

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用iframe框架来实现。 有个问题就是,目标页面的高度是动态调整的,非固定的。 在网上搜索了下,找个一个不错的解决方法,使用js来实现,具体实现代码如下:

1、js代码:


<script>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>  


2、html代码如下:

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
以上代码参考这篇文章,这篇文章里同时提到了其他几个方法,感兴趣的可以看下。 http://caibaojian.com/iframe-adjust-content-height.html

扫描二维码推送至手机访问。

版权声明:本文由葱子博客发布,如需转载请注明出处。

本文链接:https://www.aitiancheng.com/article-1362.html

相关文章

wcdp下phpmyadmin无法正常使用的问题解决办法

wcdp下phpmyadmin无法正常使用的问题解决办法

在使用wdcp管理面板过程中,你是否遇到过种问题? 从wdcp后台进入phpmyadmin,提示如下错误: 这里提供一种解决方法: 1、首先进入wdcp找到MySQL管...

网站被镜像怎么办:几招教你轻松应对

网站被镜像怎么办:几招教你轻松应对

最近有个客户的网站被黄赌毒网站做了镜像。 我收集了这些镜像网站的IP地址,通过在服务器端禁止他们访问的形式来阻止客户网站被镜像。 主要步骤如下: 一、收集镜像网站IP地址:...

phpmyadmin安装、更新教程及配置设置

phpmyadmin安装、更新教程及配置设置

我们使用的一键环境包有时候提供的phpmyadmin版本较低,想要使用最新版的phpmyadmin的时候应该怎么升级呢? 在这里,葱子教大家对phpmyadmin的升级操作。 一、备份当前服务器上的phpmyadmin文...

申请免费的腾讯云SSL证书,实现https访问

申请免费的腾讯云SSL证书,实现https访问

本教程教你免费申请腾讯的1年免费使用的SSL证书。 使用QQ或者微信登陆腾讯云:【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元 找到SSL证书申请选项:云产品—域名服务—SSL证书。 点击进入申请页面 点击立即...

【百度站长平台官方说法】关于HTTPS的常见问题(系列二)

关于网站HTTPS改造中的问题,院长又收集了一部分站长常见问题,分享给大家: Q:网站做HTTPS的好处是什么? A:HTTPS是公认的防止被劫持的有利手段 Q:HTTPS改造的缺点是什么?&nb...

windows server2008下使用IIS7配置 web.config 实现 Discuz! X3.2的伪静态

windows server2008下使用IIS7配置 web.config 实现 Discuz! X3.2的伪静态

首先确认下你的IIS中是否按照了URL重写模块。如果没有安装,就需要安装下URL重写模块。 1. 安装URL Rewrite模块 首先从官网下载安装URL Rewrite Modu...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。