• iframe高度自适应


    今天在做移动端一个关于iframe框架的页面,突然发现高度不能自适应,以前有同行问过我这个问题,当时也是查了好多资料没有解决,今天自己碰上了,就麻烦大了,于是还是各种查资料,终于找到了解决问题的办法,网上还是大神多哇。以下博主就给大家贴上解决的办法。
    第一种方法,采用的是ajax的load方法,此方法简简单单的一串代码即可:

    <script>
    	$(function(){
    		$(".box").load("test.html");	
    	});
    </script>
    

    但是此方法有个问题就是需要将原来test.html页面所引用的css文件、images文件和js文件等都放在class="box"所在页面的根目录,这样,就不太好了,此为一弊端。
    第二种方法,采用的是网上大神们的方法:
    <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

    //注意:下面的代码是放在test.html调用
    $(window.parent.document).find("#main").load(function(){
    var main = $(window.parent.document).find("#main");
    var thisheight = $(document).height()+30;
    main.height(thisheight);
    });
    
    //注意:下面的代码是放在和iframe同一个页面调用
    $("#main").load(function(){
    var mainheight = $(this).contents().find("body").height()+30;
    $(this).height(mainheight);
    });
    
  • 相关阅读:
    DockerFile 解析
    Docker 容器数据卷
    Docker 镜像
    Docker 常用命令
    Docker 安装
    vue全站式笔记
    接口环境配置
    前端跨域的三种方式
    vue+axios 模拟后台返回数据的三种方式:本地创建json、easymock平台、mockjs
    cookie、sessionStorage与localStorage是什么?
  • 原文地址:https://www.cnblogs.com/tnnyang/p/5150741.html
Copyright © 2020-2023  润新知