美文网首页
BOM基础笔记

BOM基础笔记

作者: 红姑娘 | 来源:发表于2017-07-20 09:27 被阅读8次

Window对象

  • parent 是父窗口
  • window.frames 返回窗口中所有命名的框架
  • opener是用open方法打开当前窗口的那个窗口

在页面内嵌入一个iframe,在iframe中提供一个输入项id为username,输入后,在iframe外面窗口id为myDiv的div标签中显示内容

    //子窗口-父窗口传值
function changeParent(){
               //1.0获取输入框的值
       var uvalue = document.getElementById("username").value;
       //2.0 获取父窗口的标签并赋值(parent是父窗口  )
   window.parent.document.getElementById("myDiv").innerHTML=uvalue;
}

在页面内嵌入一个iframe,在iframe中提供一个输入项id为username,输入后,在iframe外面窗口id为myDiv的div标签中显示内容

  //父窗口-子窗口传值
  function parentValueToChild(){
  //1.0获取标签的值
var myNames = document.getElementById("myName").value;
  //2.0获取到子窗口的标签并赋值(window.frames 返回窗口中所有命名的框架)
var subFrame = window.frames[0];//关键
subFrame.document.getElementById("username").value=myNames;
}

Js window.showModalDialog()方的使用简介

  a.url: 弹出窗口指向哪一个页面
  b.varArgIn: 向弹出页面传递的参数
  写法如下:
     window.showModalDialog("openner3.htm",tableObj);

在父页面中,如何制定所需传递的常数

  在Js中,定义一个类是很简单的(类的写法,不过感觉像是个HashMap),定义方法如下
  //定义一个超级对象
  var tableObj = new Object();
  //下面的写法就是自定义属性了,"tableObj."后面的属性名可以随便写,感觉有点像key值
  //"="后面的是属性值,也是什么都行,感觉有点像value值
  tableObj.table = window.document.getElementById("myTable");
  tableObj.userName = window.document.getElementById("txtUserName").value;
  //模拟调用一下
  var tempObj = tableObj;
  //在这里,"."后的属性名与之前对象定义的属性名一直就Ok了,感觉像通过key值取value值
  //"tempObj.table.tagName"之所以这样写是因为"tempObj.table"是指向了id为"myTable"的一个Table对象,所以可以调用这个对象的"tagName"属性来查看其是什么元素
  alert(tempObj.table.tagName);
  alert(tempObj.userName);

在子页面中如何接收来自父页面的参数

  调用下面的方法即可:
  var comeFromFatherPageObj = window.dialogArguments;

子页面向父页面传递返回值(当子页面即将关闭时)

  写法如下:
  //首先在父页面调用window.showModalDialog()方法的时候做些操作,如下:
  objReturnValue = window.showModalDialog("openner3.htm",tableObj);
  //然后再子页面,即将关闭的时候加一句话,如下:
  window.returnValue = "asdad";//可以是任何东西
  window.close();

相关文章

  • BOM基础笔记

    Window对象 parent 是父窗口 window.frames 返回窗口中所有命名的框架 opener是用o...

  • 转载几篇BOM的常用方法

    原生js学习笔记5——BOM操作Bom操作常用方法

  • BOM——基础

    技术是自由的靠山 本文长期更新,如有错误,还请指正关注一下不迷路 =.= BOM,浏览器对象模型 window 对...

  • BOM基础

    js提供了一系列对象用于与浏览器交互,主要包括window、navigator、document、location...

  • BOM 和 DOM

    BOM和DOM的关系老是弄混淆,还是做笔记记录下吧。 1. BOM Browser Object Mode, 浏览...

  • js学习内容总结(2)

    1.语言基础2.严格模式3.js组成(ECMAScript DOM BOM)4.各种(DOM BOM)例子5.组件...

  • day25-课堂总结

    BOM基础 1.什么是BOM - 浏览器对象模型(browser object model)js中提供了一个全局的...

  • 每日复盘20200109

    每日最重要的三件事 时间:2020年1月9日(周四) 一、整理BOM类的基础数据 BOM类的基础数据是我们计划编制...

  • BOM笔记

    open打开窗口 地址 属性window.open('http://www.baidu.com',"_self"...

  • BOM基础操作

    打开关闭窗口 userAgent loction loction的search hash 可视区宽高,文档宽高,滚...

网友评论

      本文标题:BOM基础笔记

      本文链接:https://www.haomeiwen.com/subject/euxrkxtx.html