关于IFRAME的一些小应用
标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling：当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出 现滚动条；如为Yes，则显示；
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。
比如:
<Iframe src="[url]http://www.IFrame.com/xyz[/url]" width="250" height="200" scrolling="no" frameborder="0"></iframe>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
窗口与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body οnclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
要注意的是，Nestscape6.0之前版本不支持Iframe标记。
例子：
1<iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes"></iframe>
<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME>
2用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的<title>..</title>
<SCRIPT LANGUAGE="javascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" οnmοuseοver="scroll(-1)" οnmοuseοut="scroll(0)" οnmοusedοwn="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快！"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" οnmοuseοver="scroll(1)" οnmοuseοut="scroll(0)" οnmοusedοwn="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快！"></TD>
</TR>
</TABLE>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下面这段代码可以实现IFrame自适应高度，即随着页面的长度，自动适应以免除页面和IFrame同时出现滚动条。
源代码如下
<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.οnlοad=dyniframesize
</script>
转载于:https://blog.51cto.com/xionghui/32301
关于IFRAME的一些小应用相关推荐
- 一行代码解决网站防挂IFRAME木马方案,小鸽子序列(灵儿)
最近公司和好朋友的网站纷纷被IFRAME了,有的挂上了鸽子,有的疯狂地弹窗,有的给人家增加流量.一个个文件去查找替换那些IFRAME代码,刚松口气,不久又加上去了,哎,什么世道!于是他们向我这个&qu ...
- iframe的滚动条隐藏后仍可滑动
主要核心是给 标签外添加一个 div,新添加的idv的宽度 比 iframe的宽度小即可,具体的宽度小多少,需要自己调试设置 例如: <!DOCTYPE html> <html la ...
- iframe安全问题
1.iframe 有些时候我们的前端页面需要用到第三方提供的页面组件,通常会以iframe的方式引入.典型的例子是使用iframe在页面上添加第三方提供的广告.天气预报.社交分享插件等等. ifram ...
- html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
- python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
- HTML和CSS基础系列（一）
文章目录 Doctype HTML5 为什么只需要写 !DOCTYPE HTML 你知道多少种Doctype文档类型? 行内元素和块级元素 块级元素 行内元素 行内块级元素 让块级元素一行显示的方法 ...
- 网站制作实用代码--HTML
实用代码 转自: http://redly.bokee.com/3816774.html 整人代码 效果示范地址:http://210.54.62.41/bbsxp/images/upfile/200 ...
- 常见的前端安全问题（xss / csrf / sql / ddos / cdn...）
目录 1. xss(Cross Site Scripting)跨站脚本攻击 1.1 持久型(存储型)攻击 / 非持久型(反射型)攻击 是什么? 1.2 xss 出现的场景?造成的危害? 1.3 防御 ...
- IFrame语法小全
IFrame语法小全 IFrame可以在网页内嵌入另一个页面,类似"画中画"形式. 标记的使用格式是: <Iframe src="URL" width ...
最新文章
- WinCE中串口驱动及接口函数介绍（转载）
- 弱类型语言的优势：C#的委托概念在Javascript中的实现
- [云炬Mysql数据库笔记] 第3章 数据定义
- Uploadify3.2中文提示
- android137 360 双击三击事件
- .某学校的学生公寓有14栋楼，用A～N这14个大写字母的其中一个代表楼号，每栋楼的层数为6层，用1～6六个数字表示。每层楼有40个房间，编号为01～40。具体表示一个宿舍房间时，用1个字母加3位数字表
- ik做尾巴摆动 maya_maya中使用节点做IK骨骼的拉伸
- 零基础开始学前端有什么建议？
- vue.js能美化界面吗_美牙真的能变美吗？刘涛花百万美化牙齿，容貌大变样，网友：太神奇了吧...
- webapi 给自己挖的坑
- 最大流最小割定理 （定理，割集)
- Word自动生成目录的方法
- SysKey 和 SAM
- python中 f代表什么_python 中下拉框中的f，v，m是什么意思？？
- clustream java_数据流聚类算法
- 解决git报错[remote rejected] HEAD -＞ master (pre-receive hook declined) error: failed to push some...
- 实时股价——可以查询股票当前价格。用户可以设定数据刷新频率，程序会用绿色和红色的箭头表示股价走势。
- 群晖NAS搭建测速网站，支持万兆
- Android 引导页开发管理2
- LightGBM模型简单预测股票涨跌情况