iframe 属性 iframe标签

编程之家2026-06-05815次浏览

其实iframe 属性的问题并不复杂，但是又很多的朋友都不太了解iframe标签，因此呢，今天小编就来为大家分享iframe 属性的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

HTML <iframe> 标签定义和用法

定义和用法：iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

提示：您可以把需要的文本放置在<iframe>和</iframe>之间，这样就可以应对无法理解 iframe的浏览器。

属性①align

属性值：left、right、top、middle、bottom；

属性的作用：规定如何根据周围的元素来对齐此框架。

属性的说明：不赞成使用该属性。请使用样式代替。

属性②frameborder

属性值：1、0

属性作用：规定是否显示框架周围的边框。

属性③height

属性值：pixels、%

属性作用：规定 iframe的高度。

属性④longdesc

属性值：URL

属性作用：规定一个页面，该页面包含了有关 iframe的较长描述。

属性⑥marginheight

属性值：pixels

属性作用：定义 iframe的顶部和底部的边距。

属性⑦marginwidth

属性值：pixels

属性作用：定义 iframe的左侧和右侧的边距。

属性⑧name

属性值：frame_name

属性作用：规定 iframe的名称。

属性⑨scrolling

属性值：yes、no、auto

属性作用：规定是否在 iframe中显示滚动条。

属性（10）src

属性值：URL

属性作用：规定在 iframe中显示的文档的 URL。

属性（11）width

属性值：pixels、%

属性作用：定义 iframe的宽度。

JavaScript如何修改页面中iframe的属性值

页面一刷新，所有JS对页面做的修改都会恢复的，如果楼主想让浏览器记住JS设定的width之类的数据（即使刷新页面，也依然能够记住刷新前的JS设置），目前来讲：

1、HTML5有客户端数据储存的方法，但是支持的浏览器不多，jQuery库的Data对象实现了部分的HTML5客户端储存的功能，而且多浏览器支持；

2、简单点的办法就是使用URL参数，即在使用JS对页面进行修改（比如重新设定页面中某个iframe的width）时，同时把设定的值添加到页面的URL中，这样当页面刷新时，设置的值并没有丢失，只要通过适当的方法，把这些值再读出来，并重新设置，就可以模拟保持设置。举个简单例子：

<html>

<head>

//储存当前页面的JS对iframe做出的设置

var settings={};

function autoSet(){

//处理URL，如果带有初始设置，则读取

var sval= location.href;

if(sval.indexOf('?')){

var vals= sval.split('?')[1];

if(vals.indexOf('&')){

vals= vals.split('&');

for(var i=0;i<vals.length;i++){

settings[vals[i].split('=')[0]]= vals[i].split('=')[1];

autoSetVal(vals[i].split('=')[0],vals[i].split('=')[1]);

}

}else{

settings[vals.split('=')[0]]= vals.split('=')[1];

autoSetVal(vals.split('=')[0],vals.split('=')[1]);

}

function autoSetVal(tag,val){

var ifm= document.getElementById('ifm1');

ifm[tag]= val;

}

function setVal(tag,val){

settings[tag]= val;

fixURL();

}

function getSURL(){

var sval= location.href;

if(sval.indexOf('?')){

return sval.split('?')[0];

}else{

return sval;

}

function fixURL(){

var url= getSURL();

if(settings!={}){

url+='?';

var vals= [];

for(var i in settings){

vals.push(i+'='+settings[i]);

}

url+= vals.join('&');

}

location.href= url;

}

window.onload= function(){

autoSet();

}

</script>

</head>

<body>

</body>

</html>

HTML中iFrame标签有哪些用法

这次给大家带来HTML中iFrame标签有哪些用法，在HTML中iFrame标签用法的注意事项有哪些，下面就是实战案例，一起来看一下。

最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来，这其中用到了很多关于iframe的方面，总结如下：

1.作为弹出层铺底覆盖

大家如果做过那种黑色遮罩盖住整张页面，而碰巧用户用的是IE6，更碰巧的是页面上有select元素，那就有得头疼了（原理就不在这里赘述了）。我们会发现弹出的DIV没法遮住select,轮到我们的iframe出场了。逻辑如下：

与弹出p同级放入iframe

保证iframe的 z-index小于弹层p z-index

增加window resize和scroll事件,保证iframe能盖住整张页面

部分代码

var iframe= U.isie6()?'<iframe style="position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:'+ ds.height+'" frameborder="0"></iframe>':'';

$container.append(iframe).appendTo($body);2.跨域写入cookie

有 a.com和b.com两个domain。在某些条件下b的部分功能会出现在a页面上。有时需要操作a页面的时候对b.com domain的cookie做一些操作以方便用户下次访问。我们只需要在a页面加入一个iframe(动态或固定)即可，src属性指向b的一张代理页面，在这张页面执行cookie操作即可。

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！