iframe框架实例(web前端三大主流框架)
大家好,今天小编来为大家解答以下的问题,关于iframe框架实例,web前端三大主流框架这个很多人还不知道,现在让我们一起来看看吧!
iframe说明与用法
一、记录说明
二、iframe说明
<iframe></iframe>标签用于定义一个页面的内联框架。就是在一个html页面中分出小块,然后用iframe把其他网页嵌入进来,这小块就会显示其他html页面的内容了。
三、iframe标签常用属性
四、父、子页面常用方法
1、父页面
注意:iframe加载也需要时间(相当于重新打开一个页面),需要在父页面操作子页面,要等子页面加载完成,iframe常加上onload事件,jq常加上$('#iframeId').load(function(){});再开始操作子页面。
2、子页面
五、实例
这里也包含了项目中写的常用的公共函数。为了方便js直接嵌入html中。因为jquery很方便,也引入了。
六、替换方法
1、ajax获取页面操作DOM加载。jquery也有提供$('divId').load('.html')直接加载的方法。
2、vue等框架,组件。
框架嵌套iframe标签常见的几种使用方法
先来看看百度百科对于iframe标签元素的介绍!都是比较详细,接着就是实际的应用了!
2
新建一个记事本文件,并将它重命名为.html文件,添加必要的<html><body>标签,为了便于说明,同时添加<head>和<title>,将标题改名为iframe元素标签的使用!
3
在<body>中添加iframe,ulr为你要嵌套网页的地址,需要带上http的,由于经验不上带有网址,不演于演示,width,height为所占用的宽度和高度,以百度首页为例,当然嵌套两个网页也是可以的!
4
当然嵌套两个网页或者多个网页也是可以的,高度和宽度都可以自行设置!
5
再看其他的比较常用的可选属性,如name,通过对定义好的名字,就指定框架页面进行跳转!
6
至于其他可选属性,就不再一一举例,看看解析,再试验一下就清楚了,如scrolling="no"就是不显滚动条,align控制框架的对齐方式等等,用法都差不多!
7
源代码:
<html>
<head>
<title>iframe元素标签的使用</title>
<body>
<a rel="external nofollow" href="url" target="iframe1">跳转到百度经验</a><br/>
<iframe src="url" width="600px" height="400px" name="iframe1"scrolling="no"/>
<iframe src="url" width="600px" height="400px" name="iframe2" align="right"/>
</body>
</head>
</html>
ajax frame iframe分别是什麽
猪哥解答:
首先ajax是一种技术,而frame跟iframe是HTML的标签元素,也算是HTML的控件。
1、AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),底层的实现是javascript,它使用 XMLHttpRequest进行异步数据查询、检索,也就是说你在静态页面中做某个操作的时候不需要刷新页面就可以做到客户端与服务器端的数据交互,以前正常的做法是通过页面提交来实现客户端与服务器端的数据交互,而现在不需要提交表单就可以了。
2、Frame是HTML的标签,HTML框架,这个目前用的比较多,主要用于页面的布局,一个Frame可以引入一个HTML页面,比方说我做了两个页面,一个页面可以用来做导航栏,一个页面用来做数据显示,那么我用左右结构的Frame,左边放导航栏页面,右边放数据显示页面。
Frame标签是要放在FrameSet标签里面的,FrameSet决定了框架的结构,给你一个简单的代码实例(网上找的),他这个例子挺好,框架里套框架,具体的可以去百度文库下个HTML教材看看。
<html>
<head>
<title>frameDemo</title>
</head>
<frameset rows="81,20,*,20" cols="*" frameborder="NO" border="0" framespacing="0" id="frame1">
<frame name="top1" scrolling="no" noresize src="1.html" frameborder="0">
<frame name="top2" scrolling="no" noresize src="2.html" frameborder="0">
<frameset rows="*" cols="200,8,*" frameborder="NO" border="0" framespacing="0" id="frame2">
<frame name="leftmenu" scrolling="auto" noresize src="1.html" frameborder="0">
<frame name="callleftmenu" scrolling="no" noresize src="menubar.html" frameborder="0">
<frame name="mainframe" scrolling="auto" src="1.html" frameborder="0">
</frameset>
<frame name="bottom" scrolling="no" noresize src="2.html" frameborder="0">
</frameset>
</html>
3、IFrame跟Frame类似,属于内部HTML框架,如果想在一个页面里嵌套一个完全独立的页面,可以用IFrame来实现,这样可以做到局部刷新技术,在出现ajax之前,这个IFrame被广泛应用于页面的登录窗口,以避免整个页面的刷新提交,Ajax技术成熟之后,IFrame逐渐退出历史舞台了,了解就好。用法很简单就是在HTML页面中加一个标签<iframe src="你想引入的页面"></iframe>然后可以设置窗口大小等等。
关于本次iframe框架实例和web前端三大主流框架的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。