iframe自动调整大小

最新推荐文章于 2022-02-24 11:39:02 发布
最新推荐文章于 2022-02-24 11:39:02 发布
阅读量1.8k 收藏
点赞数

页面跳转自动调整大小


A.jsp


<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>A</title>   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
<script type="text/javascript">
  function resizeIframe(iWidth,iHeight){
   var mainIframeObj = document.getElementById("mainIframeId");
   mainIframeObj.style.height = iHeight+"px";
   //mainIframeObj.style.width = iWidth+"px";
  }
</script>
  </head>
  <body>
  <form method="post" action="B.jsp" style="width:100%;text-align: left;padding: 0;margin: 0;" target="mainIframe">
    <input name="testTest"/>
  </form>
    
    <iframe id="mainIframeId" name="mainIframe"></iframe>
  </body>
</html>




B.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">   
    <title>B</title>   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  <script type="text/javascript">
     function resizeparentFrame()
     {
         var topDivObj = document.getElementById("topDiv");
        //alert(topDivObj.scrollHeight+"--"+topDivObj.clientHeight+"--"+topDivObj.style.height);
         var hh = document.body.scrollHeight+50;
         hh = topDivObj.scrollHeight + 50;
         alert(hh);
         var ww = document.body.scrollWidth+80;
      window.parent.resizeIframe(ww,hh);
     }
   </script>
  </head>
 <body>
  <div id="topDiv">
  <%
     String i = request.getParameter("testTest");
     int t = Integer.parseInt(i);
     for(int j = 0;j < t;j++)
     {
      out.print("TEST<br/>");
     }
     %>
     </div>
 <script type="text/javascript">
     if (self.frameElement != null && (self.frameElement.tagName == "IFRAME" || self.frameElement.tagName == "iframe")) {
         resizeparentFrame();
     }
 </script>
 </body>
</html>


H_Hao
关注
调整iframe的大小以适合内容（仅限同一域）
CSS 初学者指南
06-22 2276
通常，您为iframe设置宽度和高度。 如果里面的内容更大，滚动条就足够了。 下面的脚本试图通过动态调整iframe的大小以适应其加载的内容来解决此问题。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>&l...
iframe放大显示_iframe操作 调整大小
weixin_42361478的博客
12-24 4189
在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法...
iframe-resize:一个非常粗略的jQuery插件，可用于调整iframe的大小
05-13
iframe调整大小 一个简单的实用程序，可将iframe调整为其内容的大小。 用法 $('iframe').iframeResize(); 这会将加载事件处理程序绑定到每个iframe，并将它们调整为当前内容的大小。 它还为自定义sizeToContent事件注册了一个处理程序，该事件可以使用以下方法从iframe中触发： window.parent.$(window.frameElement).trigger("sizeToContent"); iframeResize-min-height可用于为iframe设置默认高度，并在加载内容时自动将其删除。
iframe自动根据内容调整大小
盐一酱的专栏
12-21 6528
出处：http://blog.163.com/xx_jun_/blog/static/20827520920125169374412 最近做网页开发，用到了iframe，其实以前也用这个，不过由于它不能自动根据内容调整大小，所以用的很少，也就没有仔细研究，可是最近做网页开发其中几个页面必须要用到iframe才能很容易的进行一些操作，不得以就研究了一下，如何让其自动根据内容来设定自身的大小
多个iframe自动调整大小的问题
01-19
怎样用一个函数，自动调整这个页面里所有iframe的高度呢？ function change_size(iframe) { iframe.style.height=info_content.document.body.scrollHeight+1+”px”; } 我用过这种方式，但是等号后面的第一个对象...
嵌入到HTML的iframe自动适应大小
03-19
在探讨“嵌入到HTML的iframe自动适应大小”的主题时，我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度，从而实现良好的响应式设计和用户体验。...
javascript firefox 自动加载iframe 自动调整高宽示例
10-26
1. **iframe自动加载** iframe标签用于在现有的HTML页面中嵌入另一个HTML页面。在文档中，通过JavaScript创建了一个iframe元素，并且将其src属性设置为需要加载的网页URL，这样就可以实现在页面中动态地加载其他...
自动设置iframe大小的jQuery代码
10-26
在很多场景下，我们需要根据父页面的大小动态调整iframe的尺寸，以保持页面布局的一致性和用户体验的流畅性。本文将探讨如何使用jQuery实现iframe宽度的自动设置。 首先，我们来看一下iframe标签的基本属性。通常在...
iframe操作 调整大小
weixin_30755709的博客
06-09 297
在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。 我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实...
让iframe自动适应页面的javascript
weixin_30542079的博客
06-01 114
放到<head></head>中。 <scripttype="text/javascript">//**iframe自动适应页面**////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔.例如:["myframe1","myframe2"]，可以只有一个窗体，则不用逗号。//定义ifram...
iframe根据子页面自动调整大小（两种方法）
qq_43096062的博客
08-05 1万+
iframe根据子页面自动调整大小（两种方法）（第一种）（第二种） 很多人估计会遇到这样的情况，在IFrame嵌入某些页面，总会出现滚动条，那么有没方法，可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢？答案是肯定的，经过查找，发现了两种方法，大家直接引用就好 （第一种） 在要嵌入的页面添加js： //iframe高度自适应 　　function IFrameReSize(if...
IFrame自动调整大小
顺子网络 PHP网站建设
09-23 2196
var myI,myW,myHfunction ResizeIframe(i) {    i.height = 10;    i.width = 10;    var b = i.contentWindow.document.body;        myI = i;    myW = b.scrollWidth;    myH = b.scrollHeight;    setTimeout("R
设置iframe标签的大小
qq_42092076的博客
04-19 4041
<ifrarme>标签的大小设置，Django填入<ifrarme>标签后自动设置大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&g...
iframe嵌入网页时，页面大小怎么自适应
热门推荐
五花漏的博客
02-24 3万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
js实现鼠标拖动改变iframe，frameset大小
满大人的博客
07-31 1440
实现拖动竖线调整左侧菜单部分的宽度 思路：点击tree和content中间这条线时记录当前鼠标位置，当鼠标抬起时再次记录位置并且重新设置tree部分的宽度。 页面组成：页面由三部分组成:top.html 一级菜单部分，tree.html 左侧菜单部分，content.html主要内容部分。最外层是一个main.html， 我们要实现拖动tree和content之间线改变tree部分的宽度 具体...
使用js、jQuery做在指定区域内鼠标拖动并缩放iframe标签
qq_44963127的博客
10-18 916
使用js、jQuery做在指定区域内鼠标拖动并缩放iframe标签 先是iframe标签拖动问题，这里使用的方法是在iframe标签上方浮动一个遮罩的div，iframe的位置跟随遮罩div的位置变化而被修改显示 1、这样做的优点是在iframe移动的过程中不会鼠标焦点丢失导致卡顿问题 2、缺点是无法点击iframe内部（当然iframe的滚动条是可被拖动的） var diffX = e.pageX - iframe.offsetLeft // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相
【转】如何调整一个 IFrame 到其内容的大小不显示滚动条[微软帮助]
weixin_30780221的博客
08-19 126
概要 在某些情况下, 您可能希望调整一个 IFrame 以便看到, 但没有滚动条都显示在网页上所有文档内容 本文介绍如何执行此。 更多信息 确定大小的 IFrame 的内容, 必须访问基础 IFrame 文档的高度和宽度属性。 因为只有脚本访问页面, 同一域中承载您只能访问属性以例如, （跨框架脚本） 同一域中承载页。 因此, 的 IFrame 源文档必须来自相同域与页包含 IFram...
css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
weixin_30327815的博客
12-24 483
写在最前针对于在vue中实现拖拽改变两左右个div大小的方式，请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题，比如这样，右侧div中使用了一个iframe组件，导致实际操作中出现两个问题，一个是拖不动，另外一个是无法根据鼠标移动，快速响应，甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如...
iframe自动调节宽度
最新发布
07-04
当内容的宽度未知或需要根据宿主页面动态调整大小时，你可以使用`iframe`的`width`属性和`height`属性设置为"100%"，让它们自适应容器的宽度。 例如： ```html <iframe src=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值