精华内容
下载资源
问答
  • domainA 有一个页面index.html,通过iframe嵌套了domainB的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条由于javascript同源策略的限制...
  • js设置iframe自适应高度 浏览器窗口变化改变iframe高度

    js设置iframe自适应高度
    监听浏览器窗口变化=改变iframe高度

    个人理解:

    /**
     * 设置iframe高度、body高度和浏览器窗口高度一样,
     * body层没有滚动条,
     * 只有iframe内有滚动条
     */
    

    主要js代码

    //$(window).height()代表了当前可见区域的大小,
    //#iframeId 为iframe的id属性
    //减去30   调整iframe大小
    function setHeight() {
    			$('body').height($(window).height());
    			var $content = $("#iframeId");
    			$content.height($(this).height() - 30); 
    			$content.find('iframe').each(function() {
    				$(this).height($content.height());
    			})
    		}
    

    粘贴完整代码看效果
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>iframe自适应高度</title>
    		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    		<style>
    			html, body {
    				margin: 0;
    				padding: 0;
    				width: 100%;
    			}
    			.iframe_div, .frameId {
    				width: 100%;
    				border: 0;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="right-div">
    			<a href="aaaa.html" target="iframeId"> aaaa</a>
    			<a href="bbbb.html" target="iframeId">bbbb</a>
    		</div>
    		<div class="iframe_div">
    			<iframe class="frameId" src="aaaa.html" name="iframeId" id="iframeId"></iframe>
    		</div>
    
    	</body>
    
    </html>
    <script>
    	$(function() {
    
    		//改变iframe高度
    		setHeight();
    
    		/*监听浏览器窗口变化=改变iframe高度*/
    		window.addEventListener("resize", function() {
    			setHeight();
    		});
    
    		//设置iframe高度
    		function setHeight() {
    			$('body').height($(window).height());
    			var $content = $("#iframeId");
    			$content.height($(this).height() - 30); //减去30   调整iframe大小
    			$content.find('iframe').each(function() {
    				$(this).height($content.height());
    			})
    		}
    
    	})
    </script>
    
    展开全文
  • iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一: 代码如下://注意:下面的代码是放在test.html调用 $(window.parent....
  • iframe id="mainFrame" name="mainFrame" src="main.html" style="width:100%;" frameborder="0" scrolling="no" onLoad="this.height=100" ></iframe> </div> $(function () { //时间控制每

    转载(来源忘记了。。。)

    <!--内容部分-->
    <div class="con">
      <iframe id="mainFrame" name="mainFrame" src="main.html" style="width:100%;" frameborder="0" scrolling="no" onLoad="this.height=100" ></iframe>
    </div>
    $(function () {
        //时间控制每隔200毫秒检查当前页面高度以及滚动高度,测试多遍,cpu占用极少,不明显影响程序运行速度
        window.setInterval("reinitIframe()", 200);
    })
    
    
    //iframe自适应高度,解决了动态更换页面高度无法自适应问题
    function reinitIframe() {
        var iframe = document.getElementById("mainFrame");
        try {
            //bHeight 和 dHeight 如果相等,用其一等于iframe.height 即可
            // var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            // var height = Math.max(bHeight, dHeight);
            console.log(dHeight)
            iframe.height = dHeight;
        } catch (ex) { }
    }

     

    展开全文
  • 完美解决跨域iframe高度自适应

    热门讨论 2015-05-25 09:47:13
    完美解决跨域iframe高度自适应,完美解决跨子域iframe高度自适应,嵌入几个页面解决跨域iframe高度自适应。。。
  • 在构建B/S系统界面的时候,经常会遇到主页面index.html中嵌套其他页面的情况 ,虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时候iframe的使用是不可避免的
  • iframe的代码,注意要写ID,没有ID查找不到 代码如下: <iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe> 方法一: 代码如下:...
  • 有时候,我们会使用 iframe标签,将前端分离项目无感的嵌入 如以Freemark为主体较老的项目。 我们知道,当iframe内部内容比父页面所指定的宽高大的时候,会出现滚动框。 所以,让iframe的宽高能根据自身内容自动...
  • google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,... 2、然后看看怎么获取Iframe中的页面的高度。 其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器
  • iframe自适应高度

    2019-09-25 01:58:16
    通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑...

    通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。
    我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题。另外,在兼容性方面,也研究的不彻底。

    这篇文章,希望在这两个方面再做一些深入。

    可能有人还没接触到这个问题过,先说明一下,什么是高度自适应吧。所谓iframe高度自适应,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。

    顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦。

    传统做法大致有两个:
    方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。
    方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。
    在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。

    两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。

    如果在主窗口做一个Interval,不停的来获取被包含页的高度,然后做同步,是不是即方便,又解决了JS操作DOM的问题了呢?答案是肯定的。

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htmiframe_c.html

    主页面代码示例:

    <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>
    <script type="text/javascript">
    function reinitIframe(){
    var iframe = document.getElementById("frame_content");
    try{
    iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
    }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);
    </script>

    一直执行,效率会不会有问题?
    我做了测试,同时开5个窗口(IE6、IE7、FF、Opera、Safari)执行这个代码,不会对CPU有什么影响,甚至调整到2ms,也没影响(基本维持在0%占用率)。

    下面谈谈各浏览器的兼容性问题,如何获取到正确的高度,主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype,不同的doctype应该不会影响结果,但是假如你的页面没有申明doctype,那还是先去加一个吧。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    在主页面追加以下测试代码,以输出这两个值,代码示例:

    <div><button οnclick="checkHeight()">Check Height</button></div>
    <script type="text/javascript">
    function checkHeight() {
    var iframe = document.getElementById("frame_content");
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
    }
    </script>

    被加载页面,可以切换一个绝对定位的层,来使页面高度动态改变。如果层展开,则会撑高页面高度。代码示例:

    <div>
    <button οnclick="toggleOverlay()">Toggle Overlay</button>
    </div>
    <div style="height:160px;position:relative">
    <div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
    </div>
    <script type="text/javascript">
    function toggleOverlay() {
    var overlay = document.getElementById('overlay');
    overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
    }
    </script>

    下面列出以上代码在各浏览器的测试值:
    (bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值)

     

    暂且无视Opera比别人少3像素的问题…可以看出,如果没有绝对定位的东西,两个值是相等的,取哪个都无所谓。
    但是如果有,那么各个浏览器的表现不太相同,单取哪个值都不对。但可以找到了一条规律,那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了:

    function reinitIframe(){
    var iframe = document.getElementById("frame_content");
    try{
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    var height = Math.max(bHeight, dHeight);
    iframe.height =  height;
    }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);

    这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float也会导致两个值的差异。

    如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。
    可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 οnlοad=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。
    这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。
    在我的一个实际项目中,在成本和收益之间权衡,我并没有做这个事情,因为每个DOM函数中都要插入这个代码,代价太高,其实层缩回去不缩掉也不是那么致命。包括Demo里,也没有去做这个事情。如果读者有更好的方法,请告诉我。

    这是最终的主页面的代码:

    <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"
     οnlοad="this.height=100"></iframe>
    <script type="text/javascript">
    function reinitIframe(){
    var iframe = document.getElementById("frame_content");
    try{
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    var height = Math.max(bHeight, dHeight);
    iframe.height =  height;
    }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);
    </script>

    转载于:https://www.cnblogs.com/superMarioli/archive/2010/05/05/3683731.html

    展开全文
  • Vue iframe高度自适应

    万次阅读 2019-04-28 18:13:17
    iframe引入报表,高度自适应。 <template> <div style="height:auto;"> <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe"> <...

    iframe引入报表,高度的自适应。

    <template>
      <div style="height:auto;">
        <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe">
        </iframe>
      </div>
    </template>
    
    <script type="text/javascript">
    
    
    export default {
      name: 'turnoverfamily',
      data(){
        return{
          bdTokenUrl : 'http://193.112.22.34:8081/WebReport/ReportServer?reportlet=PHBIP_JTXX.cpt&op=view'
        }
      },
      created() {
        this.getUrl();
        this.$nextTick(()=>{
            this.getCode();
        });
      },
      mounted(){
        /**
         * iframe-宽高自适应显示   
         */
        const oIframe = document.getElementById('bdIframe');
        const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
        oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
      },
      methods: {
        /**
         * 获取-外部接口信息
         */
        getUrl() {
            let that = this
            let bdUrl = {queryurl: this.$paths.bdpath+'/locate'};
            this.$api.getBdToken(bdUrl,function(res) {
                that.bdTokenUrl = res.data.data;
        })
      },
    }
    }
    </script>
    
    <style>
    
    </style>
    

     

    展开全文
  • 为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。 首先设置样式 body{margin:0; padding:0;} ...
  • 6种iframe高度自适应的方法

    千次阅读 2021-03-13 00:03:39
    js自适应高度,实际上就是设置iframe的高度,设置等于内嵌网页的高度,从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度,同样可以...
  • 设置HTML中Iframe框架自适应高度

    千次阅读 2012-11-30 13:51:07
    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更...
  • var iframe = document.getElementById("iframeid"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var ...
  • iframe id="iframepage" src="Index.html" name="iframepage" frameborder="0" width="1349" scrolling="no" onload="iFrameHeight()" ></iframe> <a href="aboutUs.html" ; target="iframe...
  • 今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动...
  • react使用iframe标签引入网页自适应高度 定义Iframe 函数组件(Iframe函数组件可提为高阶组件提高代码复用性) const Iframe = props => { window.onresize=function(){ props.load()} return ( <iframe id=...
  • 处理iframe自适应宽、高,会经常用到,网上整理了一份,写在这里备用:单个iframe 高度自适应:<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.sc...
  • 所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要...
  • 对于iframe高度自适应的问题,网上已经被讨论n次了,一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。 今日遇到的自适应问题与以往有一些不同,这次的src是...
  • html iframe高度自适应

    2015-09-15 10:29:01
    最近遇到一个问题纠结死了,iframe总是不能高度自适应,去网上查有很多解答,但是总不能解决问题,根本无效 老是报错a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, ...
  • 跨域下的iframe自适应高度跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。 方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。 我们...
  • iframe自适应高度(兼容多种浏览器) 亲测可以
  • 引源:(亲测) https://blog.csdn.net/alex8046/article/details/51456131
  • 2. bootstrap-tab.js 新增函数: function changeIframeHeight( iframeId,height ){ $( "#" + iframeId ).height( height ); $(".tab-content").css('height',height ); $(".tab-pane.active").css('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,278
精华内容 2,511
关键字:

html中iframe自适应高度