iframe放大显示_iframe操作 调整大小
在我们做网页的时候,经常会用到iframe,它很向asp.net中的母板,但是比母板更加的灵活好用。在配合jquery后,会实现很强大的效果,像Tab控件的效果啊等等。第一篇开发经验笔记,还是不说那么多了。进入主题。
我们根据不同的单击焦点在同一个iframe中打开不同的网页时,往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法:
首先,触发转到子页面的函数,这个我们需要改变iframe的src的值,可以写在click事件或者mouseover事件或者mousedown事件等等中。
var iframe1 = window.parent.document.getElementById("iframeID");
iframe1.src="要转到的子页面";
接下在就是在改变子页面的大小。这里分为两种(我知道的):在触发转到子页面的页面写,还有一种是直接在子页面写。
一、在触发转到子页面的页面写,据我所知,这种方法可以实现,但是没有第二种好,使用条件有限
在用jquery时,我们知道它是在页面加载时先加载jquery,然后加载其它内容,我们在触发一个事件时,只是改变了缓存中的值,要在触发第二个事件时,第一次触发的值才会真正的显示出来。那么只用一个click去触发,只能转到子页面,但是不能改变iframe的大小,这里,我用两个函数去触发,mousedown和mouseup
例:$("#buttonID").mousedown(function(){
//转到子页面的函数
resizeFrame();//改变大小的
})
.mouseup(function(){
resizeFrame();//将缓存中修改的值显示到页面,即实现iframe大小改变的效果
})
但是,这种方法有一定的缺陷,因为响应函数是需要一定的时间的,不同的浏览器相应的时间不同,这样会照成鼠标单击过快而使mouseup()函数来不及相应。
二、直接在子页面写改变iframe大小的函数,这种方法可以避免第一种响应时间的问题
在子页面中的javascript中加入
function resizeFrame(){
//改变iframe大小的代码
}
然后在页面加载时触发
接下来说改变iframe大小的函数
1、我的方法是:
function resizeFrame(){
var content_iframe = window.parent.document.getElementById("iframeID");//获取iframeID
var div_height = parseInt($(content_iframe).contents().find("子网页ID").css("height"));//使iframe高度等于子网页高度
content_iframe.height = div_height + 100;
}
在网上有人说可以不用获取iframe的ID,也不用获取子网页的ID,但是这种方法我用了一下,没有打到预期的效果
function resizeFrame(){
frameElement.width = document.documentElement.clientWidth;
frameElement.height= document.documentElement.clientHeight;
}
有什么错误的地方,欢迎指出。
iframe放大显示_iframe操作 调整大小相关推荐
- iframe放大显示_iframe标签使用和在移动端(缩放)适配问题
这是我做项目遇到的问题希望对你有帮助,忽喷! [iframe与window对象(contentwindow)] var detialIframe=document.all("detialIf ...
- iframe放大显示_iframe在移动端的缩放
工作中碰到个奇怪的问题,折腾了大半天,终于算是解决了,这里把分析思路和解决办法记录下. 项目是做响应式的公司官网,前期的静态图页面切完后就提交给后台作为模板使用了,我也就基本退出项目. 在后端落地时发 ...
- iframe放大显示,如何让iFrame在点击按钮时全屏显示?
I would to make the iFrame to appear on fullscreen with a button click using JavaScript. 解决方案 You wi ...
- Linux命令之route - 显示和操作IP路由表
转自: http://codingstandards.iteye.com/blog/1125312 用途说明 route命令用于显示和操作IP路由表(show / manipulate the IP ...
- Python使用matplotlib绘制数据去重前后的柱状图对比图(在同一个图中显示去重操作之后同一数据集的变化情况)
Python使用matplotlib绘制数据去重前后的柱状图对比图(在同一个图中显示去重操作之后同一数据集的变化情况) #仿真数据 import pandas as pd import numpy a ...
- iframe嵌套显示整个页面_【HTML】框架标签lt;iframegt;
说明 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 格式语法: 注:该URL指向不同的网页. height 和 width 属性用来定义iframe标签的高度与宽度.属性默认以像素为单位 ...
- 图片放大显示的jQuery插件
从网上下载了一个jquery的图片放大显示插件,效果如下 前台代码调用: 先引入js <script type="text/javascript" src="../ ...
- frame框架的显示隐藏操作 (转)
下面是主要代码: index.htm <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT=&q ...
- 使用iframe+postMessage跨域操作和通信
使用iframe+postMessage跨域操作和通信 场景 1. http://XXX/a.html(自己的)页面要操作http://YYY/b.html(其他域名的) 2. 看了网上很多都是同域名 ...
最新文章
- Oracle数据库导入导出命令!
- 最小公倍数(Least Common Multiple)
- ubuntu中安装wmware-tools
- C语言写数据库(三)
- js弹出窗口关闭当前页面,而不弹出提示框
- 判断应用程序是否是当前激活程序(获得焦点的程序)
- python操作sqlite数据库_Python操作Sqlite正确实现方法解析
- PHP获取文件夹内所有文件包括子目录文件的名称或路径
- 使用JNI加载JAVA虚拟机
- 红米note7html5测试,红米Note 7 Pro评测:千元王者名副其实
- 方正台式计算机保护卡密码忘记了,方正电脑E系列忘记还原卡密码处理方法
- python可执行文件 情人节快乐_各位情人节快乐, Python帮忙撒狗粮, 我连夜做了这个程序!...
- 基于java的小型超市管理系统系统(含源文件)
- win11 edge怎么卸载?win11 edge浏览器彻底卸载的方法教程
- 洛谷试炼场 没了 不见了?
- Element组件 Drawer 抽屉的关闭问题
- 今日睡眠质量记录74
- DZY Loves Math 系列详细题解
- NCE4 L5 Youth
- win10 iso 下载地址