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_+";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"