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

iframe高度自适应的一个方法

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

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用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

相关文章

好用的php问答系统都有哪些?tipask和whatsns对比

好用的php问答系统都有哪些?tipask和whatsns对比

就目前来讲,国内做的还不错的php问答系统有tipask和whatsns,这两套php问答系统葱子我都有试用过,总的来讲各有千秋。 tipask的代码风格比较简洁,开发者应该是对技术比较有追求,同时整体的页面模板非常简洁,看着很舒服。wh...

wdcp计划任务导致wdcp面板无法访问解决办法

wdcp计划任务导致wdcp面板无法访问解决办法

今天在设置wdcp的计划任务时,服务器重启后wdcp面板无法访问,尝试在ssh中重启wdcp,提示如下错误:env: /etc/init.d/wdcp: No such file or directory 尝试在百度中搜索查找解决方案后,...

不再使用的域名,一定要记得注销掉备案信息

不再使用的域名,一定要记得注销掉备案信息

我们这些站长,自己手里一定不止一个域名,很多时候为了方便以后做网站,我们会一次性备案好几个域名以备不时之需。 不过久而久之很多已备案的域名以为某些原因我们不再使用了,这个时候我们一定要记得注销备案信息。 那么为什么一定要注销域名的...

wordpress使用当前文章tag标签调用相关文章

大部分的wordpress主题在文章页都没有调用相关文章的功能,今天我找到了一份wordpress下使用当前文章tag标签调用相关文章的代码,分享给大家。 一、为什么要使用tag标签调用文章: 1、标签比分类更...

代码适配的网站如何优化

来自百度站长官方文档: 为了使百度能够知道当您的页面发生变化时,同时需要用其他的ua重新抓取一遍,请您添加Vary HTTP标头。Vary HTTP 标头具有以下两个非常重要且实用的作用:  a) 它会向 ISP 和其他位置使用的缓存...

apache下实现网站http访问301跳转到https

打开网站的配置文件:XXX.conf, 在<VirtualHost *:80>下面添加以下代码:  RewriteEngine on RewriteRule ^(.*)$ https://www....

发表评论

访客

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