如果iframe始终调用同一个固定高度的页面,基于Jquery库的代码很好实现

2019-11-26 作者:联系我们   |   浏览(124)

iframe自适应中度

因此js 来支配自适应高度;
html代码:

<iframe src="须求三番一回的iframe地址" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="百分之百" onLoad="iFrameHeight()" ></iframe>
js代码:
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>  

javascript原生和jquery库完毕iframe自适应内容惊人和宽窄---推荐应用jQuery的代码! iframe sr...

    </script>

//注意:上面包车型地铁代码是放在和iframe同八个页面调用

上面是别的三种方法:
iframe代码,注意要写ID

jquery操作 iframe的方法,jquery操作iframe

大家先看一下 JQUE揽胜极光Y中的对像 contents() 的扶植文件

contents()
概述
追寻相配成分内部装有的子节点(包罗文件节点卡塔尔。假使元素是一个iframe,则查找文档内容

示例
描述:
检索全部文件节点并加粗

HTML

复制代码 代码如下:

<p>Hello <a href=";, how are
you doing?</p>

jQuery

复制代码 代码如下:

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:
<p><b>Hello</b>
<a href=";, <b>how are you
doing?</b></p>

描述:
往一个空框架中加些内容

HTML

复制代码 代码如下:

<iframe
src="/index-blank.html" width="300" height="100"></iframe>

jQuery

复制代码 代码如下:

$("iframe").contents().find("body")
.append("I'm in an iframe!");

 

去掉iframe 的边界 frameborder="0"

1 内容里有八个ifame

复制代码 代码如下:

<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码:

复制代码 代码如下:

$("#mainframe",parent.document.body).attr("src","")

2 假设剧情之中有八个ID为mainiframe的ifame

复制代码 代码如下:

<iframe id="mainifame"...></ifame>

ifame包括七个someID

复制代码 代码如下:

<div id="someID">you want to get this content</div>

得到someID的内容

复制代码 代码如下:

$("#mainiframe").contents().find("someID").html()html 或者
$("#mainiframe").contains().find("someID").text()值

2 如上边所示
leftiframe中的jQuery操作mainiframe的内容someID的内容

$("#mainframe",parent.document.body).contents().find("someID").html()或者
$("#mainframe",parent.document.body).contents().find("someID").val()

Jquery获取到 iframe 所属的父窗口的中间的id为xuan的 标签的

$(window.parent.document).find("#xuan").html(x);//

//js制造 元素 并增加到 父成分的 Iframe中的 元素中的dom操作难点:

iframe中一贯调用父窗口中的情势:假诺父窗口有个add的方法

self.parent.add();

===============================================================

IE和Firefox对iframe document对象的差别性

在IE6、IE7中,大家能够利用document.frames[ID].document来做客iframe子窗口中的document对象,但是那是不相符W3C标准的写法,也是IE下独有的法子,在Firefox下却不得以利用,Firefox下行使的是相符W3C标准的document.getElementById(ID).contentDocument方法,后天自己在写实例的时候,通过IE8举办测量检验,IE8也是使用的相符W3C规范的
document.getElementById(ID).contentDocument 方法。所以大家可以写一个在IE和Firefox下通用的拿走iframe
document对象的函数—getIFrameDOM:

复制代码 代码如下:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.:假使大家要获得iframe的window对象,并非document对象,可以运用document.getElementById(ID).contentWindow的不二秘诀。这样我们就足以使用子窗口中的window对象了,比方子窗口中的函数。

在子窗口使用父窗口的函数,获取父窗口document对象

在子窗口中,我们能够由此parent就足以拿走父窗口的window对象,若是假定我们在父窗口有三个函数为getIFrameDOM,我们得以经过parent.getIFrameDOM来调用,同理大家运用parent.document就能够在子窗口中访谈父窗口的document对象了。

动用JavaScript进行iframe的DOM操作实例

率先,大家在父窗口中引进七个iframe子窗口,ID分别为wIframeA、wIframeB,地址分别为:a.html、b.html。
父窗口主要HTML代码如下:

复制代码 代码如下:

<div id="pHello" style="margin:10px
auto;width:360px;height:30px;">此处可由此iframeB的JavaScript函数,来替换哦~</div>
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no"
frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB"
src="b.html" scrolling="no" frameborder="0"></iframe>

 
在子窗口A、B中自个儿放了二个ID为hello的P,以福利大家实行DOM操作演示,子窗口A、B的显要HTML代码如下:

复制代码 代码如下:

<p id="hello">Hello World!</p>

1、在iframe中,父窗口操作子窗口的DOM

建好了父窗口跟子窗口,那样我们能够在父窗口中,通过以下iframeA()函数来把子窗口A退换P的背景颜色为革命:

复制代码 代码如下:

functioniframeA(){//给子窗口A更动ID为hello的背景色
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//宽容IE、Firefox的iframeDOM获取函数
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2、在iframe中,子窗口操作父窗口的DOM

在子窗口中,大家能够方便的扩充父窗口DOM操作,只需求在DOM操作从前增进亦歌parent对象的不二秘技就能够啊,如:在上边包车型地铁子窗口B中,大家得以使用上面包车型客车代码把,父窗口中ID为“pHello”的从头到尾的经过给替换掉:


3、在iframe中,子窗口A操作子窗口B的DOM

既然子窗口能够操作父窗口的window对象和document对象,那么子窗口也得以操作其余的子窗口的DOM啦~断桥残雪在子窗口B中能够直接使用parent直接调用父窗口中的getIFrameDOM函数获得子窗口A的document对象,那样要改进子窗口A的源委就相当粗略啦,如以下的代码:

复制代码 代码如下:

vara=parent.getIFrameDOM("wIframeA");

===================================================================================

叁个iframe高度自动生成的标题搞了本身半天,互连网找了下资料,不是很好,结合了瞬间jquery(版本1.3.2),4行代码就可以,完美包容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

复制代码 代码如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//那行可代表上黄金年代行,那样heightSet函数的参数能够省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
       document.getElementById("thisFrameId").height=bodyHeight; 
}
<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

引用

this关键字在各个浏览器就好像有分歧的情致,FF和IE必供给透过iframe的名字去获取内部页面中度,而别的浏览器则能够用this或ID

引用

都说四个异步的难题,借使您ajax用得极其多,但又不想每一次都去设置,那动态退换iframe分明达不到你的代码清洁须要,无法,要么你就退出iframe。小编只好说说平时处理格局,毕竟ajax或动态表单在相近选择中只占小数比例,异步央浼后只需在前面加上:

Js代码

复制代码 代码如下:

parent.window.heightSet();

iframe的秘诀,jquery操作iframe 大家先看一下 JQUELANDY中的对像 contents() 的帮衬文件 contents() 概述 查找相称成分内部有着的子节点(包涵...

iframe在div中怎自适应中度

<iframe scrolling="no" name="aa" frameborder="0" src="bb.html" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)"></iframe>

iframe高度自适应,700为温馨设定的iframe中度最低值,中度小于700的将以700出示,大于700将以div本人中度来突显。iframe高度最低值能够和煦校订  

        //自适应中度,不在同豆蔻梢头域的对象,是不能够相互操作的,只可以通过URL地址把子页面包车型客车万丈传过来
        function iframeHeight() {
            var ifm = document.getElementById("iframeid");
            var hash = window.location.hash.slice(1);
            if (hash && /height=/.test(hash)) {
                if (ifm != null) {
                    ifm.height = hash.replace("height=", "");
                }
            }
            setTimeout(iframeHeight, 200);
        }

我们接受www.a.com下的另贰个页面agent.html来做代理,通过它赢得iframe页面包车型大巴冲天,并设定iframe成分的冲天。

jquery代码1:

jquery库完成iframe自适应内容中度和宽度,jqueryiframe

javascript原生和jquery库实现iframe自适应内容惊人和增幅---推荐使用jQuery的代码! 

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%"   frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> 
听说Jquery库的代码很好实现: 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
      $("#mainframe").load(function(){ 
      $(this).height(0); //用于每趟刷新时调整IFRAME中度起头化 
      var height = $(this).contents().height() + 10; 
      $(this).height( height < 500 ? 500 : height ); 
    }); 
}); 
</script> 

‍基于JS原生代码的兑现: 
<script language="javascript"> 
       if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script> 
只需在你被iframe调用的文书</body>之后出席地点这段就可以! 
这一个也足以操纵iframe的万丈随内容的多而自动拉长 
<iframe name="web" width="百分之百" frameborder=0 height="百分百" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>jquery库达成iframe自适应内容中度和宽度

IFRMAE恳求三个跨域时,而这几个跨大家从不操作权限,我们独有加八个HTML文件的权柄,怎么着落实自适应行高
那供给贰当中等页面iframe.html

<script type="text/javascript">

其次种有效,可是要留神一点是,扩张的JS要写在iframe上边,放在头顶是测量检验未有信守。
测量检验代码:
<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist" frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
<script type="text/javascript">
//注意:下边包车型大巴代码是放在和iframe同三个页面调用,放在iframe上边
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
 $(this).height(mainheight);
});
</script>

iframe.html内容(它向主页面通过hash这一个瞄点参数向主页面传中度卡塔尔国
<iframe name="iframeid2" id="iframeid2" scrolling="no" width="1000" frameborder="0"
        src="" onload="iFrameHeight()"></iframe>

假若iframe的冲天未有规定,那将是从头的万丈。

跨域的时候,由于js的同源战略,父页面内的js不可能获得到iframe页面包车型地铁中度。供给多少个页面来做代理。
方法如下:就算www.a.com下的二个页面a.html要含有www.b.com下的二个页面c.html。
咱俩应用www.a.com下的另多个页面agent.html来做代办,通过它得到iframe页面包车型客车可观,并设定iframe成分的冲天。

    <script type="text/javascript">
        function iFrameHeight() {
            var ifm = document.getElementById("iframeid2");
            var subWeb = document.frames ? document.frames["iframeid2"].document : ifm.contentDocument;
            if (ifm != null && subWeb != null) {
                ifm.height = subWeb.body.scrollHeight;
                //  top.location.hash= "#height=" + subWeb.body.scrollHeight; //ie中展现未有权限
                var hostUrl = document.referrer;
                hostUrl += "#height=" + subWeb.body.scrollHeight;
                window.top.location = hostUrl;
            }
        }
    </script>

<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist" frameborder="0" width="100%" scrolling="no" height="100%"></iframe>

连带小说

有关找寻:

前几天看啥

探求本领库

回到首页

  • 安卓开垦入门指南--安卓手提式有线电话机自适应draw9patc
  • 引用library之——带有自定义属性的自定义控
  • HTML中tr标签设置边框不出示的消除办法,tr边
  • Ali云centos中tomcat安装及开机自运营,Ali
  • centos/debian配置gitlab 7.1x来搭建自行建造的git旅馆
  • iOS8 自定义navigationbar 以及 UIBarButtonItem 边距问

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  后边四个代码  正则表明式  Flex教程  WEB前端教程  

规律:通过改换top.location的hash值,来贯彻高档的自适应
主页面内容:
<iframe name="iframeid" id="iframeid" scrolling="no" width="1000" frameborder="0"
                onload="iframeHeight()"></iframe>
        $("#iframeid").attr({ src: + cUrl });

跨域下的iframe自适应高度

借使iframe的惊人未有规定,那将是开始的可观。
iframe是网页中的后生可畏有个别,其大小还要直面网页的节制,设置最高能够应用height="百分之百"。
繁多消除iframe超过的莫斯中国科学技术大学学都以扩大了滚动条来得以达成的,非常粗略,假若您iframe中的音信超过了风姿洒脱显示屏,你就必需使用滚动条了。

被iframe的自适应中度迷惑了二日,查各类法子最终都被迫失利,有的时候见到下边那篇小说,故收留。

原稿链接:www.cr173.com/html/28045_1.html

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

var hash_url = window.location.hash;

...

$(this).height(mainheight);

//注意:下边包车型地铁代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

</script>

jquery代码2:

$("#mainframe").load(function () {

a.html中包含iframe:
<iframe src="" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

var hash_width = hash_url.split("#")[1].split("|")[0]+"px";

最棒简单的点子,也不用写什么决断浏览器中度、宽度啥的。
上面包车型地铁二种情势自行选购其少年老成就能够了。一个是坐落和iframe同页面包车型大巴,三个是献身test.html页面包车型大巴。
介意别放错地点了啊。

var b_iframe = window.parent.parent.document.getElementById("Iframe");

//注意:上边包车型地铁代码是献身和iframe同二个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

本文由美高梅赌堵59599发布于联系我们,转载请注明出处:如果iframe始终调用同一个固定高度的页面,基于Jquery库的代码很好实现

关键词:

  • 上一篇:没有了
  • 下一篇:没有了