Iframe使用总结

一、iframe 常用属性

/**
*iframe 常用属性:
*id=name -- 设置框架的名称和编号,设为一致
*src -- 引用链接地址
*width -- 框架的宽度
*height -- 框架的高度
*frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
*marginwidth -- 定义了框架中HTML文件显示的左右边界的宽度,缺省值由浏览器决定
*marginheight -- 定义了框架中HTML文件显示的上下边界的矿度,缺省值由浏览器决定
*scrolling -- 设置或获取框架是否可被滚动。
* auto = 自动调整
* yes = 有滚动条
* no = 无滚动条
*vspace -- 设置或获取对象的水平边距
*hspace -- 设置或获取对象的垂直边距
*/
<iframe id="fid" name="fid" src="" width="428" height="30"  marginheight="0" frameborder="0" scrolling="no" vspace="0"
hspace="0"  marginwidth="0" ></iframe>

二、Iframe对象操作
------在父窗口中操作Iframe

1、获取Iframe对象
   var frame = window.frames["myFrame"];
   或window.frames.myFrame; 或frame=window.frames[0];

2、Iframe访问子页面的标签对象
  var obj=window.frames["ifr"].document.getElementById("child_obj");

3、调用子页面的函数

  window.frames['map'].addMarkers(no);

------在子页面中操作Iframe
1、获取Iframe对象
   frame=parent.$('#ifr');或frame=parent.frames['ifr'];

2、调用父页面的函数
   parent.add(a,b);//普通函数的调用
   parent.frames["myframe"].pageDispacher(url);//调用指定iframe的函数

------利用iframe的frameElement获取信息
如:iframe.frameElement.xxx
 xxx的常用取值有:
   baseURI      ------项目根路径
   outerHTML    ----- 输出完整的Iframe标签
   clientWidth    ---iframe显示的宽度
   clientHeight   ---iframe显示的高度
   scrollHeight   ---垂直滚动条的长度
   scrollWidth   ----水平滚动条的长度
   src           ----iframe的资源引用
   offsetHeight  ----偏移高度
   offsetWidth   ----偏移宽度
   offsetTop     ----顶部偏移
  
------获取iframe的资源信息记录

   iframe.location.x
  
   iframe.location="index.html"    ----重新定位资源
   x相关的取值:
   href            ----url全路径,如: "http://localhost:80/nwdmap/map?map=baidu#v=104.037124_30.659664_12"
   hash            ----#(锚标记)及其后边的内容
   host            ----主机,如:"192.118.20.39:8080"
   hostname    ----主机名称,如 "192.118.20.39"
   pathname        ----项目路径  /nwdmap/map
   port            ----端口号    "8080"
   protocol     ----使用协议  "http:"
   search    ----url参数   "?map=baidu"

三、实战应用
  1、嵌入地图资源
   <iframe id="myframe" name="myframe" style="display: block;"
    width="100%" height="580" scrolling="no" frameborder="0" src="${ctx}/nwdmap/map/aliyun.html"></iframe>

  2、不设置地图容器的高度让地图容器的高度自适应iframe的高度
   function load(){
     createDiv("map","81%","left");//创建地图容器
     createDiv("result","25%","right");//创建结果面板
     com.nwd.map.Map.initial();//初始化地图
  }
  //创建所需要的div------不创建静态标签
  function  createDiv(id_,width_,float_){
    var div = document.createElement('div');
    div.id=id_;
    document.body.appendChild(div);
    var f=parent.frames[0],h;
    if(f){
       h=f.frameElement.clientHeight;
    }
    div.style.cssText = "border: 0 solid; top:3px;width:"+width_+";height:"+(h-8)+"px;position: absolute;background-color:

#eeffee;float:"+float_;
    if(id_=="result")div.style.cssText+=";right: 2px;";
    else div.style.cssText+=";left: 0px;";
  }
  3、地图切换
  重新定位页面,  如:window.frames['smap'].location="newmap.html"

转载于:https://www.cnblogs.com/boonya/archive/2012/08/11/2633211.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值