报表软件JS开发引用HTML DOM的location和document对象

上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows、location、document三种。这次就继续介绍后两种,location和document对象。

Location

Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

location对象的常用属性

hash         设置或返回从#开始的URL

host          设置或返回主机名和当前URL的端口号

hostname     设置或返回当前URL的主机名

href          设置或返回完整的URL

pathname     设置或返回当前URL的路径部分

port          设置或返回当前URL的端口号

search        设置或返回从?开始的URL(查询部分)

1.location对象的reload()方法

reload()方法用于重新加载当前文档

语法为:

location.reload(false)

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

Document

每个载入浏览器的HTML 文档都会成为Document对象。Document 对象使我们可以从脚本中对HTML页面中的所有元素进行访问。

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

1.document对象的常用属性

cookie      设置或返回当前文档有关的所有cookie

title        返回当前文档的标题

URL        返回当前文档的URL

2.document对象的常用方法

2.1 close()方法

close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据。语法:

document.close()

该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。

如果使用 write() 方法动态地输出一个文档,必须记住这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。

一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

2.2 getElementByID()方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法:

document.getElementById(id)

参考完整代码:

<html>  
<head>  
<script type="text/javascript">  
function getValue()  
{  
var x=document.getElementById("myHeader")  
alert(x.innerHTML)  
}  
</script>  
</head>  
<body>  
   
<h1 id="myHeader" onclick="getValue()">这是标题</h1>  
<p>点击标题,会提示出它的值。</p>  
   
</body>  
</html>

2.3 getElemenByName()方法

getElementsByName() 方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有getElementsByName() 方法返回的是元素的数组,而不是一个元素。

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

2.4write()方法

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。

语法:

document.write(exp1,exp2,exp3,....)

通常按照两种方式使用 write() 方法:

一是在使用该方法在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。

第二种情况中,请务必使用 close() 方法来关闭文档。

示例:

参考代码:

<html>  
<body>  
   
<script type="text/javascript">  
document.write("Hello World! ","Hello You! ","<p style=‘color:blue;‘>Hello World!</p>")  
</script>  
   
</body>  
</html>
时间: 2024-08-08 09:24:19

报表软件JS开发引用HTML DOM的location和document对象的相关文章

报表软件JS开发引用HTML DOM的windows对象

HTML DOM是W3C标准(是HTML文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM定义了用于HTML的一些列标准的对象,以及访问和处理HTML文档的标准方法. 通过DOM,可以访问所有的HTML元素,连同他们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. 在JavaScript中可以访问并处理所有的HTML DOM对象(windows对象.location对象.document对象),动态地修改网页.

Web报表工具JS开发之日期校验

在报表开发过程中,我们常常需要对查询界面进行日期校验.例如有两个参数:开始日期和结束日期,我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段内,否则提示相关信息,对此可以在查询按钮中增加事件.下面我们通过FineReport来介绍下具体的设置. 具体效果图如下: 可以看出会报出如下错误. 模板的设计工作这边就不重点讲了,设定好如下的模板界面: 给查询按钮增加点击事件,具体的JS代码如下: var start =this.options.

移动端报表JS开发示例--获取定位

上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1. 解决思路 在用FineReport设计模板的时候添加一个按钮控件,点击该按钮的时候,获取当前地理位置,并将该位置信息复制给某个单元格,最后在客户端填报当前模板即可. 2. 示例 实现如下图所示效果,点击地理位置按钮获取当前位置与当前时间,并显示在下方对应的单元格中: 2.1 模板制作 打开设计器

移动端报表JS开发示例

最近对移动端的报表开发颇有研究,细磨精算了好久,虽然到现在还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比较有代表性的FineReport. 1.  移动端哪些地方支持调用js web事件      分页预览    填报预览 加载结束事件     √        X 填报成功事件    --       √ 报表内部js      单元格       图表 超级链接js        √        √ 控件事件          参数控件    

SDP软件快速开发平台 ---- 开发平台详细介绍

一.前言   在企业间的商业竞争越来越激烈的今天,如何快速实现客户需求,如何快速便捷的开发.修改.更新.维护软件项目系统功能,如何降低软件研发的成本,如何降低公司人员流动对软件开发项目造成的影响.如何提高团队开发效率.如何降低开发人员的技术水平要求.如何缩短开发周期.如何同时开发多个项目等等,在此目标基础上我公司研发了软件快速开发平台(Software Rapid Development Platform)工具,简称SDP.通过软件快速平台能快速便捷的设计开发生成B/S架构 html项目软件.

JS之BOM和DOM(来源、方法、内容、应用)

1.Javascript组成 JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② "ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力--",即ECMAScript不与具

软件项目开发团队组员跨项目组兼职案例分析

按照现代项目管理的观点,项目团队是指"项目的中心管理小组,由一群人集合而成并被看作是一个组,他们共同承担项目目标的责任,兼职或者全职地向项目经理进行汇报". 项目团队的特征有: (1)项目团队具有一定的目的 项目团队的使命就是完成某项特定的任务,实现项目的既定目标,满足客户的需求.此外项目利益相关者的需求具有多样性的特征,因此项目团队的目标也具有多元性. (2)项目团队是临时组织 项目团队有明确的生命周期,随着项目的产生而产生,项目任务的完成而结束,即可解散.它是一种临时性的组织. (

Mac下进行Node.js开发环境的配置

我们知道,Mac是一款天生可以提升我们开发效率的系统,合理的使用Mac下面的神器,有助于提升我们的开发效率.个人是个VIM控,今天分享一下,我在mac下是如何进行Node.js的开发环境搭建的.先给大家看看最终的效果图片吧! Iterm2 首先,推荐Iterm2这款命令行神器.它是一款终端替代工具,支持 Macos 10.5+ 版本.它具备很多优点:比如开源免费.快捷键丰富.水平垂直分屏.远程使用vi时兼容性好.如果再加上一点,就是它UI也比较友好,如果你喜欢捣鼓,可以配置主题,让iterm2界

Mac下进行Node.js开发环境配置

我们知道,Mac是一款天生可以提升我们开发效率的系统,合理的使用Mac下面的神器,有助于提升我们的开发效率.个人是个VIM控,今天分享一下,我在mac下是如何进行Node.js的开发环境搭建的.先给大家看看最终的效果图片吧! Iterm2 首先,推荐Iterm2这款命令行神器.它是一款终端替代工具,支持 Macos 10.5+ 版本.它具备很多优点:比如开源免费.快捷键丰富.水平垂直分屏.远程使用vi时兼容性好.如果再加上一点,就是它UI也比较友好,如果你喜欢捣鼓,可以配置主题,让iterm2界