iframe根据子页面自动调整大小

//iframe高度自适应

  function IFrameReSize(iframename) {

  var pTar = document.getElementById(iframename);

  if (pTar) { //ff

  if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {

  pTar.height = pTar.contentDocument.body.offsetHeight;

  } //ie

  else if (pTar.Document && pTar.Document.body.scrollHeight) {

  pTar.height = pTar.Document.body.scrollHeight;

  }

  }

  }

  //iframe宽度自适应

  function IFrameReSizeWidth(iframename) {

  var pTar = document.getElementById(iframename);

  if (pTar) { //ff

  if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {

  pTar.width = pTar.contentDocument.body.offsetWidth;

  } //ie

  else if (pTar.Document && pTar.Document.body.scrollWidth) {

  pTar.width = pTar.Document.body.scrollWidth;

  }

  }

  }

  使用方法如下:

  <iframe src="Main.aspx" scrolling="no" frameborder="0" height="100%" id="mainFrame" width="100%" onload=‘IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");‘></iframe>

复制代码

时间: 2024-11-07 02:02:30

iframe根据子页面自动调整大小的相关文章

主页面获取iframe 的子页面方法。

父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调

跨域IFRAME自适应高度(子页面TAB切换不同的高度,主页面IFRAME嵌套子页面自适应高度)

1.pinganproxy.html <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">eval(function(p,a,c,k,e,r){e=fu

IE8下IFrame 和子页面的通信

业务中遇到这种场景,我们的业务嵌入别的系统中使用,系统采用Iframe调用我们的业务,在使用过程中主要遇到两个问题: 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 2.子页面不同获取外部scrollTop的问题. 这两个问题其实都可以说是跨域通信的问题. 这两个问题我们采用了不同不同的方案来解决. 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 我们采用在外部系统中增加一个代理页面,这样的话这个代理页面就和外部系统处于同一个域中了,相当于我们在外部系统中安插了一个内

Bootstrap 模态框 + iframe &gt; 打开子页面 &gt; 数据传输/关闭模态框

父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" > <div class="modal-dialog modal-lg"> &l

使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

<frameset rows="4,200,10,*,120" cols="*" framespacing="0" frameborder="no" border="1" > <frame src=""/> <frame src="<%=practiceInfoSrc %>" id="practiceInfo&quo

子页面自动执行window.close()时父页面进行刷新的bug

前两天发现一个奇怪的问题:我在h5手机页面上通过window.open(url)的方式打开一个新窗口,在新窗口关闭的时候返回数据给父页面,然后新窗口自动close(),拿手机测试发现没有问题,测试通过.但是在PC端模拟的时候发现,子页面执行window.close()的时候父页面也会自动刷新,这个就很头疼了,因为测试人员很多时候都是通过PC来模拟进行测试的,每次都通过真机进行测试效率比较低. 问题分析:PC端模拟的时候并不是以新窗口的方式打开子页面的,而是在新标签页面打开的,就是因为是新标签页打

iframe根据子页面的内容来设置高度

以下的方法必须起一个页面服务才能使用(通过域名或ip地址来访问)并且的保证父页面与子页面是在同一域名下,不然是会报错的 contentDocument 可以获得iframe子窗口的document对象,兼容ie8+ contentWindow    这是个只读属性,返回指定的iframe的窗口对象. 在iframe加载完毕之后通过contentDocument 或者 contentWindow 这个对象来获取iframe子页面的内容高度,从而来设置设置iframe的高度.再给iframe设置高度

html中iframe根据子页面内容动态修改高度

JavaScript var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false; var isChrome = br

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte