Iframe实现自适应调用内容页的大小

最新推荐文章于 2024-05-30 16:18:48 发布
原创 最新推荐文章于 2024-05-30 16:18:48 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #stylesheet #function #server #html #c#

本文介绍了一种使IFRAME元素能自适应其内容高度的方法，通过JavaScript实现IFRAME加载完成后自动调整高度，避免了滚动条的出现，提高了用户体验。

在网站的页面布局中我们经常要用到IFRAME，而且有事需要IFARME能够自适应内容的大小，免得出现滚动条，太难看。

下面是我从网上搜集来的代码，直接用上了，觉得挺好用的，帖出来共享

被嵌页面：Inc_Left_Tech.aspx的头部代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Inc_Left_Tech.aspx.cs" Inherits="Inc_Left_Tech" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link href="CSS/Boton.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function iframeAutoFit()
    {
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        var h1=0, h2=0;
                        a[i].parentNode.style.height = a[i].offsetHeight +"px";
                        a[i].style.height = "0px";
                        if(document.documentElement&&document.documentElement.scrollHeight)
                        {
                            h1=document.documentElement.scrollHeight;
                        }
                        if(document.body) h2=document.body.scrollHeight;

                        var h=Math.max(h1, h2);
                        if(document.all) {h += 4;}
                        if(window.opera) {h += 1;}
                        a[i].style.height = a[i].parentNode.style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(window.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        //window.attachEvent("onresize",  iframeAutoFit);
    }
    else if(window.addEventListener)
    {
        window.addEventListener('load',  iframeAutoFit,  false);
        //window.addEventListener('resize',  iframeAutoFit,  false);
    }
    //-->
    </script>

</head>
<body style="background-color: #eae9e9">

 调用页面的IFRAME的代码

<iframe src="../Inc_Left_Tech.aspx" frameborder="0" scrolling="no" hspace="0" marginwidth="0PX;" width="197" height="0"></iframe>

 

iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
js实现iframe自动自适应高度的方法
10-24
在这种情况下，你需要在Iframe内容页中添加一个接口，允许父页面获取并设置Iframe的高度，例如通过`postMessage`进行通信。 此外，现代浏览器提供了`ResizeObserver` API，可以更优雅地监听元素的尺寸变化，但这个...
如何使IFrame的长宽与内容自动适应大小
Ben's Bloggings
10-10 3381
By Ben问题说明:使用Iframe, 很多时候可能有要求: 如何使iframe的长宽与内容自动适应大小? 比如asp.net的只实现一个datagrid列表,因datagrid的行数不定,不能固定iframe的长宽.解决方法:在IFrame里的asp.net页面使用window.resizeTo方法:比如dat
[转]如何使IFrame的长宽与内容自动适应大小
依依喔喔的专栏
10-12 1175
问题说明:很多时候可能写一个只有一个DataGrid的 iframe 页面,  这个时候就界面有要求了: 如何使iframe的长宽与内容自动适应大小? 比如asp.net的只实现一个datagrid列表,因datagrid的行数不定,不能固定iframe的长宽.解决方法:在IFrame里的asp.net页面使用window.res
iframe自适应内容大小
wenzi_li的专栏
08-13 288
   xml 代码 &lt;iframe align="middle" frameborder=0 name="reportbill" width=100%  height="300"           onload="document.all['reportbill'].style.height=reportbill.document.body.scrollHeight...
(转)iframe自适应
jackyrongvip的专栏
08-31 1242
http://www.blogjava.net/josson/archive/2008/01/17/175914.html1、目的系统通过一内嵌页面(iframe) 来展现网页内容（也包括内嵌页中再嵌一个网页），这将会引起如下几个问题：a.不同的网页内容多少不一致，导致iframe的高度无法与实现内容或浏览器高度相匹配。b.窗口缩放时，不能iframe不能进行自动调整。
iframe窗口高度自适应的又一个巧妙实现思路
12-10
在本文中，我们将探讨一种巧妙的方法来解决在跨域环境下，使用`iframe`实现窗口高度自适应的问题。问题的核心在于，由于JavaScript的同源策略限制，我们无法在不同域名之间直接进行DOM操作或数据交换。为了解决这个...
jQuery简单实现iframe的高度根据页面内容自适应的方法
01-19
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考，具体如下： 方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...
教你用jquery实现iframe自适应高度
01-19
iframe代码，注意要写ID 代码如下:<iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一： 代码如下://注意：下面的代码...
iframe frame 自动适应所包含的页面大小
dreary001的博客
06-18 160
[code="java"] function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offse...
iframe根据页面内容自适应高度和宽度
09-03
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
iframe缩放大小
09-13
iframe缩放大小
iframe根据内容自动等比例缩小
Eight_zhu的博客
11-21 6943
在h5网页中，嵌套第三方页面，使用iframe，然后根据第三方内容，等比例缩小，填充iframe。主要解决h5iOSapp,在线查看文件的问题。思路：将iframe宽高设置200%，然后缩小0.5 #iframeA { position: absolute; transform: scale(.5, .5) translate(-50%, -50%); ...
Js+Css 控制iframe内容自动缩放
Admans的专栏
05-19 1万+
竖屏横屏效果&lt;div class="h5box"&gt; &lt;iframe src="http://www.sina.com" frameborder="0" width="1280px" height="720px"&gt;&lt;/iframe&gt; &lt;/div&gt;
iframe 自适应
牛肉胡辣汤
10-09 5669
function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.
让iframe自适应大小 解决方案
热门推荐
小马的专栏
11-13 3万+
 第一种：        onload="this.height =   document.frames[src].document.body.scrollHeight" />例子：1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。  scrolling="">
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
最新发布
m0_65607651的博客
05-30 2563
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
iframe窗口根据内容自适应大小
qq_41346752的博客
07-23 2563
需求 需要让iframe子窗体在页面显示出的内容不被遮盖且没有滚轴，能够完整的显示出来。 实现 window.onload = function () { //1.获取子窗体 var iframes = document.getElementsByClassName("formIframe"); for (let i = 0; i < iframes.length; i++) { var iframeWindow = iframes[
超强兼容iframe自适应大小，放大缩小都可以
shitouwoai的专栏
04-10 4245
function iFrameHeight() { /*** * ifram自适应大小 * **/ var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentWindow.documen
iframe自适应大小：JavaScript实现
这个函数通常会在页面加载完成后调用，确保iframe的大小已经根据内容正确调整。 这个方法可以有效地解决iframe内容自适应的问题，但需要注意的是，由于同源策略的限制，这种方法仅适用于同源的iframe。对于跨域的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值