JavaScript对frameset的操作总结

1 框架编程概述
    一个Html
页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一
个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,
例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一
个框架中表单的行为等。

2 框架间的互相引用
   
一个页面中的所有框架以集合的形式作为window 对象的属性提供,例如:
window.frames 就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是
类似的,不同的是,这些集合是document 的属性。因此,要引用一个子框架,可以使用如
下语法:


Javascript 代码

   
window.frames[“frameName”]; 
   
window.frames.frameName 
   
window.frames[index] 

其中,window字样也可以用self代替或省略,假设frameName 为页面中第一个框架,
则以下的写法是等价的:


JavaScript 代码

  
self.frames[“frameName”] 
  
self.frames[0] 
   frames[0]
frameName
   
了解了如何引用一个框架,那么引用的这个框架到底是什么呢?其实,每个框架都对应
一个HTML 页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所
谓对框架的引用也就是对window 对象的引用。有了这个window 对象,就可以很方便地对
其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location
属性来改变框架内的页面等。


下面分别介绍不同层次框架间的互相引用:


   
2.1.父框架到子框架的引用
知道了上述原理,从父框架引用子框架变的非常容易,即:
Java 代码

   1.
window.frames[“frameName”]; 
   
这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架,根据
引用的框架实际就是window对象的性质,可以这样实现:
JavaScript 代码

       
window.frames[“frameName”].frames[“frameName2”]; 
   
window.frames[“frameName”].frames[“frameName2”];

这样就很引用到了二级子框架,以此类推,可以实现多层框架的引用。


2.2.子框架到父框架的引用
每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,
则window.parent 还表示该框架本身。


2.3.兄弟框架间的引用
如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相
引用,例如一个页面包括2 个子框架:
Java 代码

   
<frameset
rows=”50%,50%”> 
   
<frame src=”1.html” name=”frame1″
/> 
   
<frame src=”2.html” name=”frame2″
/> 
   
</frameset> 

<frameset rows=”50%,50%”>
<frame src=”1.html” name=”frame1″
/>
<frame src=”2.html” name=”frame2″
/>
</frameset>

在frame1 中可以使用如下语句来引用frame2:
self.parent.frames[“frame2”];


2.4.不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一
个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,
例如:
Java 代码

   1.
self.parent.frames[“childName”].frames[“targetFrameName”]; 

self.parent.frames[“childName”].frames[“targetFrameName”];


2.5.对顶层框架的引用
和parent 属性类似,window 对象还有一个top 属性。它表示对顶层框架的引用,这可
以用来判断一个框架自身是否为顶层框架,例如:
//判断本框架是否为顶层框架
Java 代码

   1.
if(self==top){ 
   2.
//dosomething 
   3. } 

if(self==top){
//dosomething
}

3 改变框架的载入页面
前面已经讲到,对框架的引用就是对window对象的引用,利用window对象的location
属性,可以改变框架的导航,例如:
window.frames[0].location=”1.html”;
这就将页面中第一个框架的页面重定向到1.html,利用这个性质,甚至可以使用一条链
Java 代码

   1.
接来更新多个框架。 
   2. <frameset
rows=”50%,50%”> 
   3. <frame
src=”1.html” name=”frame1″
/> 
   4. <frame
src=”2.html” name=”frame2″
/> 
   5.
</frameset> 
   6.
<!–somecode–> 
   7. <a
href=”frame1.location=’3.html;frame2.location=’4.html’”
onclick=””>link</a> 
   8.
<!–somecode–> 

接来更新多个框架。
<frameset rows=”50%,50%”>
<frame src=”1.html” name=”frame1″
/>
<frame src=”2.html” name=”frame2″
/>
</frameset>
<!–somecode–>
<a
href=”frame1.location=’3.html;frame2.location=’4.html’”
onclick=””>link</a>
<!–somecode–>

 

4 引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:
Java 代码

   1. <script
language=”JavaScript”
type=”text/javascript”> 
   2.
<!– 
   3. function
hello(){ 
   4.
alert(“hello,ajax!”); 
   5. } 
   6.
window.hello(); 
   7.
//–> 
   8.
</script> 

<script language=”JavaScript”
type=”text/javascript”>
<!–
function hello(){
alert(“hello,ajax!”);
}
window.hello();
//–>
</script>

如果运行了这段代码,会弹出“hello,ajax!”的窗口,这正是执行hello()函数的结果。
那为什么hello()变成了window对象的方法呢?事实上,在一个页面内定义的所有全局变量
和全局函数都是作为window对象的成员。例如:
var a=1;
alert(window.a);
就会弹出对话框显示为1。同样的原理,在不同框架之间共享变量和函数,就是要通过
window对象来调用。


为了方便大家的理解,下面举例说明。一个商品浏览页面由两个子框架组成,左侧表示
商品分类的链接;当用户单击分类链接时,右侧显示相应的商品列表;用户可以单击商品旁
的【购买】链接将商品加入购物车。


在这个例子中,可以利用左侧导航页面来存储用户希望购买的商品,因为当用户单击导
航链接时,变化的是另外一个页面,即商品展示页面,而导航页面本身是不变的,因此其中
的JavaScript变量不会丢失,可以用来存储全局数据。其实现原理如下:
假设左侧页面为links.html,右侧页面为show.html,页面结构如下:


Java 代码

   1. <!DOCTYPE
HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”> 
   2.
<html> 
   3.
<head> 
   4.
<title> New Document
</title> 
   5.
</head> 
   6. <frameset
cols=”20%,80%”> 
   7. <frame
src=”link.html” name=”link”
/> 
   8. <frame
src=”show.html” name=”show”
/> 
   9.
</frameset> 
  10.
</html> 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”>
<html>
<head>
<title> New Document
</title>
</head>
<frameset cols=”20%,80%”>
<frame src=”link.html” name=”link”
/>
<frame src=”show.html” name=”show”
/>
</frameset>
</html>


在show.html 中展示的商品旁边可以加入这样一条语句:
Java 代码

   1. <a
href=”void(0)”
onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a> 

<a href=”void(0)”
onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a>

其中link表示导航框架,在link.html 页面中定义了arrOrders数组来存储商品的id,函
数addToOrders()用来响应商品旁边【购买】链接的单击事件,它接收的参数id 表示商品的
id,例子中是一个id为32068 的商品:
Java 代码

   1. <script
language=”JavaScript”
type=”text/javascript”> 
   2.
<!– 
   3. var arrOrders=new
Array(); 
   4. function
addToOrders(id){ 
   5.
arrOrders.push(id); 
   6. } 
   7.
//–> 
   8.
</script> 

<script language=”JavaScript”
type=”text/javascript”>
<!–
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//–>
</script>

这样,在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块,每个模块之间彼此独立,但又可以通
过window 对象的引用来建立联系,是web 开发中的一个重要机制。在Ajax 开发中,还可
以利用隐藏框架实现各种技巧,在后面介绍Ajax 实例编程时可以发现,无刷新上传文件以
及解决Ajax的前进后退问题都会用到这种技术。

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/andensy/archive/2010/05/20/5611535.aspx

Qt——web网页和本地对象的交互

有时候可能需要在html网页中调用本地的对象方法。

比如说我点击了一个视频文件的链接,希望调用本地的多媒体模块来播放这个视频文件, 如何实现?

一、html中的JavaScript调用Qt本地对象方法

过程如下:

  1. 将本地的QObject对象暴露给webkit和JavaScript
  2. 通过JavaScript调用本地QObject的槽

下面对每个步骤进行详细的分析:


1、将本地的QObject对象暴露给webkit和JavaScript

QWebFrame里提供了实现这个功能的接口:




Qt的帮助文档中对这个方法的说明如下:

Make object available under name from within the frame\’s JavaScript context. The object will be inserted as a child of the frame\’s window object.

Qt properties will be exposed as JavaScript properties and slots as JavaScript methods.

If you want to ensure that your QObjects remain accessible after loading a new URL, you should add them in a slot connected to the javaScriptWindowObjectCleared() signal.

If Javascript is not enabled for this page, then this method does nothing.

The object will never be explicitly deleted by QtWebKit.

从这里可以看出,要想addToJavaScriptWindowObject方法有效,必须是能javascript;为了保证每次打开个新网页或刷新网页时都调用这个方法,那就应该将这个方法和javaScriptWindowObjectCleared信号相连。

相关代码如下:

webkit_vlc.h :


webkit_vlc.cpp :

现在已经将名为“obj_open_vlc”的对象暴露给了webkit的javascript, 这个对象名对应的是本地的一个类的对象

Obj_OpenVlc *obj_openVlc.

下面的代码为这个类的实现,并且类中定义了一个槽供webkit的javascript调用。

obj_openvlc.h :

obj_openvlc.cpp :
 

2、在html中通过JavaScript调用本地QObject的槽

html的代码如下:

view.html :






















</script>
<body>
<h1>Open VLC</h1>
<input type=button value=”open” onclick=”open()”>
</body>
</html>

在这个html中通过javascript代码

obj_open_vlc.openVLC(“192.168.0.1/webroot/test.f4v”);

调用了本地类Obj_OpenVlc的对象obj_openVlc的槽(方法)openVLC()。

这样子就实现了在webkit的html网页中的,通过javascript调用本地对象的方法。

 

二、Qt本地对象调用html中的javascript方法

目前我知道的有两种方法:

1. 通过QWebFrame类的槽:

QVariant QWebFrame::evaluateJavaScript ( const QString & scriptSource )

来直接调用javascript中的方法, 比如我html网页中有个javascript  的 loadFinished()方法 , 那么就可按下面的方式直接调用:

webView->page()->mainFrame()->evaluateJavaScript(“loadFinished();”);

这里假设 webView 是 QWebView类的对象。

 

2.将本地OBject的信号和javascript的方法相连。

当本地发射出这个信号时,也会调用javascript的方法。不过这里需要在javascript中加入类似下面的代码。

//将Qt本地对象 obj_open_vlc的信号与 javascript的函数slotButtonClicked相连
obj_open_vlc.ObjSignal.connect(slotLinkClicked);

此处的 ObjSignal 是Qt本地对象obj_open_vlc的一个信号,slotButtonClicked 是javascipt 中的一个方法。之后,如果本地obj_open_vlc 对象执行 emit ObjSignal() 之后就会调用javascipt的方法slotLinkClicked()。

这里贴上相关的html的代码:



























































</script>
<body>
<h1>Media Server</h1>
<p><a href=”javascript:open(\’test1.f4v\’);”>test1.f4v</a></p>
<p><a href=”javascript:open(\’test2.f4v\’);”>test2.f4v</a></p>
</body>
</html>

 

HTTP方法 谓词 及在Nginx中如何关闭(limit_except)

HTTP方法 评估结果 建议 说明 解决方案
HEAD  安全   无  除了服务器不能在响应中返回消息体,HEAD 方法与 GET 相同。HEAD 请求的响应中的 HTTP 头部中包含的元信息应该与 GET 请求发送的响应中的信息相同。该方法可用来获取请求暗示实体的元信息,而不需要传输实体本身。该方法常用来测试超文本链接的有效性、可用性和最近的修改。  
TRACE  危险   建议关闭  TRACE 方法用于引起远程的,该请求消息的应用层回射。请求的最终接收者应该反射200(OK)响应,并以该消息作为客户端回收消息的实体。 将应用服务器中的TRACE谓词拒绝
GET  安全   无  GET 方法即获取由 Request-URI 标识的任何信息(以实体的形式)。如果 Request-URI 引用某个数据处理过程,则应该以它产生的数据作为在响应中的实体,而不是该过程的源代码文本,除非该过程碰巧输出该文本。  
PUT  危险   建议关闭  PUT 方法请求将封装的实体存储在指定的 Request-URI 下。如果 Request-URI 引用已存在的资源,该封装实体应该被认作最初服务器存储的修改版本。如果 Request-URI 没有指向已存在的资源,且该 URI 可以被请求的用户代理定义为新的资源,则最初服务器可以用该URI创建资源。 将应用服务器中的PUT谓词拒绝
POST  安全   无  POST 方法用来请求最初服务器接受请求中封装的实体作为从属于请求行中的 Request-URI 标识的附属。  
OPTIONS  安全(已关闭)   无  OPTIONS 方法表示在由 Request-URI 标识的请求/响应链上关于有效通讯选项信息的请求。该方法允许客户端判断与某个资源相关的选项和/或需求或者服务器的能力,而不需要采用资源行为或发起资源获取。  
DELETE  危险   建议关闭  DELETE 方法请求最初服务器删除 Request-URI 标识的资源。最初服务器可在人为干涉下(或其它意思)屏蔽该方法。客户端不能确保该操作已提交,即使最初服务器发出的状态码表明动作已成功完成也如此。然而,在给出响应的时候,服务器不应该表示成功,除非它试图删除该资源或将它移动到不可访问的位置。 将应用服务器中的DELETE谓词拒绝


 nginx location 节点中配置:

  1. limit_except GET POST {  
  2.     deny  all;  
  3. }  

要特别注意的是

GET已经包含HEAD

还有就是limit_except的意思是”限制除了“也就是允许啦。

上面的意思是限制除了GET POST外的所有谓词 


官方文档:http://nginx.org/en/docs/http/ngx_http_core_module.html#limit_except

QT点击一个按钮后出现选择文件对话框

void MainWindow::open()
{
    if (okToContinue()) {
        QString fileName = QFileDialog::getOpenFileName(this,
                                   tr(“Open Spreadsheet”), “.”,
                                   tr(“Spreadsheet files (*.sp)”));
        if (!fileName.isEmpty())
            loadFile(fileName);
    }
}

Linux 系统中修改右键中的打开方式

注意Linux 系统中的几个目录和文件。

/usr/share/applications/下的desktop文件
/usr/share/applications/mimeinfo.cache文件
~/.local/share/applications下的desktop文件
~/.local/share/applications/default.list目录下的文件
~/.local/share/applications/mimeinfo.cache文件
/etc/gnome/defaults.list文件

其中default.list文件保存的是文件的打开方式,比如txt文档用什么程序打开之类。自然/etc下的是全局的文件打开方式,.local下的是个人的文件打开方式。

desktop文件是菜单项,就是出现在Application、System下的菜单项。/usr下的是全局的菜单项,.local下的是个人的菜单项。

cache文件全局的文件打开方式和个人的文件打开方式缓存

想添加一个菜单项,到/usr/share/applications/下随便打开一个desktop文件,照着改就行了。

怎样把自定义的菜单加入到自己想去的菜单项下呢?比如加到Programming下,如果想增加一个顶级目录,即Application下的第一层目录。

在Linux桌面系统,用户也可以像在Windows平台下,通过点击位于桌面或菜单上的快捷方式轻松找开目录应用程序。在Linux KDE和Linux GNOME桌面系统都使用Desktop Entry文件标准来描述程序启动配置信息。

Ubuntu系统下文件关联

PS:如果你要修改文件的打开方式,请选择右键=>属性=>打开方式=>删除和Windows一样,在Gnome的文件管理器(nautilus)里,双击一个文件的时候, 系统会自动调用相应的程序去打开这个文件。前提是能打开这个文件的软件已经安装并且配置完毕了。

在Nautilus里通过右键菜单固然可以修改默认的打开方式,但是缺乏灵活性和可操作性,比如,不能删除一些候选的打开方式,不能批量增加一些打开方式等等。

经过反复的摸索,终于被我发现了GNMOE的打开方式的配置方式。
这里需要涉及到以下几个目录和文件

~/.local/share/applications
/etc/gnome/defaults.list
/usr/share/applications
/usr/share/applications/mimeinfo.cache
~/.local/share/applications/mimeinfo.cache
去这几个目录看一下,就会发现很多以 desktop 为后缀的文件。 


这些文件是多功能的,第一,它们是组成GNMOE的“开始”菜单的一部分,即“开始”
菜单里的一些应用程序项,在这里都能找到。你可以运行 alacarte, http://www.linuxidc.com 这里会列出整个菜单的结构,你可以编辑它,但是很多项你没法删除,因为没有权限,你试着用root权限去运行 alacarte ,抱歉,你还是没有权限删除,要删除它们,只有在/usr/share/applications下面找到对应的文件,直接删除这个文件即可。

从总体上讲
/etc/gnome/defaults.list保存了全局的打开方式
~/.local/share/applications/defaults.list保存了个人的打开方式
当两着不一致是,优先采用局部的个人设置。

~/.local/share/applications
/usr/share/applications
这两个分别是局部的desktop项和全局的desktop项

/usr/share/applications/mimeinfo.cache
~/.local/share/applications/mimeinfo.cache
这两个分别是全局的和局部的打开方式缓存

产品经理如何在技术人员面前更有说服力?

作者简介:吴伟,资深产品经理,曾就职于新浪,现就职于约瑟网络,旗下产品“企业问答”,一款面对创业者的问答类社区产品。

以我7年来做PM(产品经理)的经验来看,说服他人,特别是研发、设计、前端这些研发部门的同事,最重要的不是口才、沟通能力和数据,而是专业。专业就是:第一,你要用内行的思维方式、表达方式和处理方式来思考、沟通和执行;第二,你要经常可以做出正确的决定。

一个人要先相信你能说出正确的话,才有可能认真去听你说的内容,进而才有可能认可你的话。通常人们认为只有内行才有可能说出正确的话来,而外行只能瞎指挥。所以PM要时时刻刻表现的很内行,很专业。

有些PM很苦恼:我明明说的是对的,为什么研发人员听不进去?是的,你说的可能是对的,但是由于你平时的表现让研发人员觉得你很外行,他们根本就没有认真听你在说什么。

只有尽量多、尽量深入的了解上下游相关岗位的专业知识,并且有一定的实践经验,才能让我们显得专业。在与相关岗位的沟通中,获得对方的信任感,进而采纳我们的意见。

有几个小技巧可以介绍一下,不过在看这些技巧之前,我必须重申一遍:让自己变得专业的根本办法是自己要尽量多的了解各个岗位的专业知识,小技巧只是一种手段,不要幻想着只凭借技巧就能真正的专业起来。

技巧1:尽量说术语

在我们与研发人员沟通的时候,尽量不要说大白话,而是使用术语。这样会让人家感觉我们很懂技术。例如有一次我和一个客户端工程师说:“我希望弹 出的窗口是模态的。”工程师听完后很诧异的说:“你还知道模态?”我说:“当然啦,这对交互设计很重要啊。”于是工程师立刻就把窗口改成模态的了,根本没 问我为什么。那么什么叫模态呢?用大白话说就是弹出一个窗口,窗口以外的地方都是黑的,或者不可以操作,只有这个窗口可以操作,类似于Windows里面 经常弹出来的讨厌的错误提示。但是你要是跟工程师这么描述,碰上脾气好的说不准帮你改改,碰上不好的准保反问一句:那多讨厌啊,我就讨厌Windows弹 错误提示。

技巧2:思维要周密

在说话之前要尽量把所有可能的情况及其解决方案想清楚。比如你要修改一个按钮的位置,人家自然要问你,空出来的位置怎么办,改过去之后会不会影响现有的功能,用户能不能习惯等等,如果你能胸有成竹的一一化解,别人自然会听从你的建议。

技巧3:让对方自己得出结论

人都是有自尊心的,都希望自己的决定是正确决定,如果你总是说“你这样是错的,我是对的”必然引起别人的反感。所以你可以先把遇到的问题摆出来,在提出自己的解决方案后立刻说:这方面你是专家,如果你觉得这个方案能用就用,如果有更好的方案我也没什么意见。

人嘛,通常都是比较懒的,既然你能提出一个还算说得过去的解决方案,而且又让对方觉得是他自己的选择,通常也就不会为难你了。

技巧4:看人下菜碟

不是对每个都用同样的话说服的,人和人都有所不同。以我的经验,对待工程师、设计师、老板是不同的。

对待工程师要有条理,逻辑要清晰,讲究数据。例如:方案1会造成数据服务器负荷过重,并发量在2万/秒以上,并且至少要占用10G的储存空间, 最重要的是,我们付出了这么大的代价,其实只满足了20%的用户,而且这部分用基本上都是不付费的用户。这一大套话说完,研发人员会认真想一想:也是啊, 万一服务器宕机了责任就大了,还是用方案2吧。

对待设计师要以情动人,因为设计师一般都是学美术出身的,特别感性。例如:大姐,你就给我改改吧,为了画这个原型我昨天都加了一宿班了,你今天 不改,明天指不定又插进来什么活儿呢,我这个项目得什么时候上线啊。再说也不是我想改啊,是销售那边儿一会儿说用户喜欢这个,一会儿说用户喜欢那个,我们 也拧不过他们啊。设计师一听,都是同事,谁还没个难处啊,得了,加班儿给人做了吧。

对待老板要学会画蓝图,例如:根据竞品研究的结果看,这个产品非常有前景,XX刚上线1个月,就已经有100万用户,10万同时在线,收入也差 不多有400来万。我们在技术上、渠道上、政府关系上都比他们强,我觉得只要能够在2个月内推出,各项数据肯定比他们强。更何况,我们的产品线目前缺乏的 就是用户沉淀,而这个产品正好提供了强大的社交功能,弥补了产品线的空缺。老板一听,小伙子想的挺清楚啊,成,给你两个工程师,一个设计师,1万块项目奖 金,1个月给我做出来。业绩好的话再给你发年终奖。

当然啦,还有些人江湖气很浓,他只要当你是兄弟,你怎么说他怎么做,没原因,没为什么。对于这种人平时多吃几顿饭,多送点小礼物,到时候自然帮你。

技巧5:人格魅力

做人要有幽默感,要学会缓和气氛。没必要每次需求讨论的时候都板着脸训人。说说笑话,插科打诨,给设计师倒杯水,给工程锤锤肩,送给运营的小姑 娘几块儿巧克力,给运维的同事买几瓶水。你平时这么注重积累,在你需要的时候别人自然不会为难你。能做的就做了,不能做的睁一眼闭一眼也就做了。

最后再说一遍:所有的技巧都是一种手段,真才实干才是王道