一种网页多层次区块剪取方法转让专利

申请号 : CN201210001846.8

文献号 : CN102446224B

文献日 :

基本信息:

PDF:

法律信息:

相似专利:

发明人 : 胡加明

申请人 : 苏州阔地网络科技有限公司

摘要 :

本发明提供一种网页多层次区块剪取方法。上述方法包括以下步骤:用户于源网页的输入控件输入网址,源网页创建网页框架以加载显示所述网址对应的网页A;所述网页A调用网页多层次区块剪取api保存所述网页A的信息;于所述网页A上的链接被点击时,通过网页多层次区块剪取api在所述源网页的网页框架显示该链接对应的网页B;所述网页B调用网页多层次区块剪取api保存所述网页B的信息;当在所述网页B进行区块剪取时,调用网页多层次区块剪取api进行网页剪取及保存操作。

权利要求 :

1.一种网页多层次区块剪取方法,其特征在于,包括以下步骤:

用户于源网页的输入控件输入网址,源网页创建网页框架以加载显示所述网址对应的网页A;

于所述源网页的网页框架加载所述网页A后,网页多层次区块剪取api接收网页多层次区块剪取api回调页面所传递的所述网页A的信息,并将所述网页A的信息保存至javascript数组变量中;

于所述网页A上的链接被点击时,通过网页多层次区块剪取api在所述源网页的网页框架显示该链接对应的网页B;

于所述源网页的网页框架加载所述网页B后,网页多层次区块剪取api接收网页多层次区块剪取api回调页面所传递的所述网页B的信息,并将所述网页B的信息保存至javascript数组变量中;

当在所述网页B进行区块剪取时,所述网页多层次区块剪取api重新加载网页B并加上url参数cut=1,所述网页B加载完成后,通过获取cut=1标识,调用JavaScript函数为网页B创建网页框架B,并对所述网页框架B进行属性设置,并将所述网页框架B添加到网页B,为所述网页框架B添加各种鼠标事件以进行区域选择,当用户在网页框架B完成区域选择后,生成确定按钮,用户点击确定按钮后,通过网页多层次区块剪取api向网页多层次区块剪取api回调页面传入所剪取网页的地址、剪取的区域宽度、剪取的区域高度、剪取区域的起点横纵坐标,网页多层次区块剪取api回调页面接收到传递信息后,将接收的信息传递给通过JavaScript的parent.parent调用的源网页JavaScript函数,源网页接收到上述信息后,保存所剪取网页的地址、剪取区域的起点横纵坐标、剪取的区域宽度、剪取的区域高度,并显示所述剪取区域。

2.根据权利要求1所述的网页多层次区块剪取方法,其特征在于,用户打开源网页,在源网页的输入控件中输入网址,源网页通过document.createElement方法创建网页框架,将所述网页框架的src赋值为所述网址,并将所述网页框架添加到源网页中。

3.根据权利要求1所述的网页多层次区块剪取方法,其特征在于,所述网页多层次区块剪取api用于在网页加载完成后自动生成网页框架m,并将网页框架m的src属性设置为网页多层次区块剪取api回调页面,并用于将所述网页框架m添加至所述网页;所述网页多层次区块剪取api用于将所述网页中的所有链接附加上onclick事件;用于通过改变所述网页框架m的src属性将所述网页的信息以URL参数形式传递至网页多层次区块剪取api回调页面,网页多层次区块剪取api回调页面通过parent.parent调用源网页的网页多层次区块剪取api回调函数以保存所述网页的信息。

4.根据权利要求3所述的网页多层次区块剪取方法,其特征在于,于所述网页A上的链接被点击时,通过重新加载网页多层次区块剪取api回调页面在URL中加入所述链接的链接地址参数,网页多层次区块剪取api回调页面接收上述链接地址参数时,通过parent.parent调用源网页的网页多层次区块剪取api函数改变源网页创建的网页框架的src属性,以加载所述链接对应的网页B。

5.根据权利要求1所述的网页多层次区块剪取方法,其特征在于,所述网页框架B的属性设置为:src设置为about:blank、背景设置为透明、宽度为网页B的宽度、高度为网页B的高度、浮动样式、margin为0、padding为0、zIndex为网页B的最大zIndex加1。

说明书 :

一种网页多层次区块剪取方法

技术领域

[0001] 本发明属于网络技术领域,尤其涉及一种网页多层次区块剪取方法。

背景技术

[0002] 目前,现有进行网页区块剪取只能剪取一级页面,即只能剪取用户首页打开的网页。如果用户想先打开一个引导页,而想剪取的页面是引导页面点进去的页面,则无法实现网页剪取。例如,用户打开新浪首页,此时用户没有网页剪取的意愿,而在点击至某个新闻页面后产生了剪取意愿,此时需要进行网页剪取,目前的网页剪取技术无法实现上述网页的剪取。因此,目前的网页剪取技术无法符合用户的操作习惯,会影响用户体验。

发明内容

[0003] 本发明提供一种网页多层次区块剪取方法,以解决上述问题。
[0004] 本发明提供一种网页多层次区块剪取方法。上述方法包括以下步骤:用户于源网页的输入控件输入网址,源网页创建网页框架以加载显示所述网址对应的网页A;于所述源网页的网页框架加载网页A后,网页多层次区块剪取api接收网页多层次区块剪取api回调页面所传递的所述网页A的信息,并将所述网页A的信息保存至javascript数组变量中;于所述网页A上的链接被点击时,通过网页多层次区块剪取api在所述源网页的网页框架显示该链接对应的网页B;于所述源网页的网页框架加载所述网页B后,网页多层次区块剪取api接收网页多层次区块剪取api回调页面所传递的所述网页B的信息,并将所述网页B的信息保存至javascript数组变量中;当在所述网页B进行区块剪取时,所述网页多层次区块剪取api重新加载网页B并加上url参数cut=1,所述网页B加载完成后,通过获取cut=1标识,调用JavaScript函数为网页B创建网页框架B,并对所述网页框架B进行属性设置,并将所述网页框架B添加到网页B,为所述网页框架B添加各种鼠标事件以进行区域选择,当用户在网页框架B完成区域选择后,生成确定按钮,用户点击确定按钮后,通过网页多层次区块剪取api向网页多层次区块剪取api回调页面传入所剪取网页的地址、剪取的区域宽度、剪取的区域高度、剪取区域的起点横纵坐标,网页多层次区块剪取api回调页面接收到传递信息后,将接收的信息传递给通过JavaScript的parent.parent调用的源网页JavaScript函数,源网页接收到上述信息后,保存所剪取网页的地址、剪取区域的起点横纵坐标、剪取的区域宽度、剪取的区域高度,并显示所述剪取区域。
[0005] 相较于先前技术,根据本发明提供的网页多层次区块剪取方法,通过网页多层次区块剪取api可以实现网页A或者网页A的子页面的剪取。于本发明中,当用户需要进行网页剪取时,再主动触发网页剪取功能进行剪取,确保用户能正常进行网页剪取操作。如此,网页区块剪取不局限于单个页面,用户可以根据自己的需求选择网页进行网页区块剪取,提高了用户体验。而且,本发明实现的网页多层次区块剪取方法完全基于网页实现,无需下载任何插件,方便、快捷、高效,能够在视频会议、远程教育等嵌入使用,应用范围广泛。

附图说明

[0006] 此处所说明的附图用来提供对本发明的进一步理解,构成本申请的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
[0007] 图1所示为根据本发明的较佳实施例提供的网页多层次区块剪取方法的流程图。

具体实施方式

[0008] 下文中将参考附图并结合实施例来详细说明本发明。需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。
[0009] 图1所示为根据本发明的较佳实施例提供的网页多层次区块剪取方法的流程图。如图1所示,本发明较佳实施例提供的网页多层次区块剪取方法包括步骤101~105。
[0010] 于步骤101,用户于源网页的输入控件输入网址,源网页创建网页框架以加载显示所述网址对应的网页A。具体而言,用户打开源网页,在源网页的输入控件(例如,文本框)中输入网址(例如,www.sina.com),源网页通过document.createElement方法创建网页框架(例如,用ifr表示),将所述网页框架的src赋值为所述网址,并将所述网页框架添加到源网页中。如此,所述网址对应的网页A可在源网页加载显示。
[0011] 于步骤102,所述网页A调用网页多层次区块剪取api保存所述网页A的信息。
[0012] 于本实施例中,网页多层次区块剪取api用于在网页加载完成后自动生成网页框架m,并将网页框架m的src属性设置为网页多层次区块剪取api回调页面,并用于将所述网页框架m添加至所述网页;所述网页多层次区块剪取api用于将所述网页中的所有链接附加上onclick事件;用于通过改变所述网页框架m的src属性将所述网页的信息以URL参数形式传递至网页多层次区块剪取api回调页面,网页多层次区块剪取api回调页面通过parent.parent调用源网页的网页多层次区块剪取api回调函数以保存所述网页的信息。其中,网页多层次区块剪取api用于将所述网页中的所有链接附加上onclick事件后,用户点击所述网页中的任何链接均只执行此链接的onclick事件,并不会进行相关的跳转,onclick事件会向网页多层次区块剪取api的回调页面传入所触发onclick事件的链接的地址。另外,当所加载网页需要调用网页多层次区块剪取api保存各种状态时,通过改变网页框架m的src属性将网页的信息以URL参数形式传递至网页多层次区块剪取api回调页面。例如,网页框架m的src属性可设置为:http://{源网页}/{网页多层次区块剪取api回调地址}?url={所加载网页地址}&width={所加载网页宽度}&height={所加载网页高度}。如此,网页多层次区块剪取api回调页面加载时通过解决URL的url、width、height三个参数值得到所加载网页的信息。由于网页多层次区块剪取api回调页面同源网页是一个域名,所以网页多层次区块剪取api回调页面通过parent.parent调用源网页的网页多层次区块剪取api回调函数,并传入所获取到的url、width、height值,由源网页进行保存。
[0013] 具体而言,当源网页中的网页框架加载网页A后,将网页A的相关属性传入网页多层次区块剪取api回调页面中,源网页通过网页多层次区块剪取api接收到网页多层次区块剪取api回调页面所传递的网页A地址、网页A宽度、网页A高度参数后,保存至javascript数组变量数组变量中,以备用户进行网页剪取操作使用。
[0014] 于步骤103,于所述网页A上的链接被点击时,通过网页多层次区块剪取api在所述源网页的网页框架显示该链接对应的网页B。具体而言,当用户在网页A上无剪取意愿时,用户可点击网页A中的相关链接进入相应的网页B。于所述网页A上的链接被点击时,通过重新加载网页多层次区块剪取api回调页面在URL中加入所述链接的链接地址参数,网页多层次区块剪取api回调页面接收上述链接地址参数时,通过parent.parent调用源网页的网页多层次区块剪取api函数改变源网页创建的网页框架的src属性,以加载所述链接对应的网页B。
[0015] 于步骤104,所述网页B调用网页多层次区块剪取api保存所述网页B的信息。于所述源网页的网页框架加载所述网页B后,网页多层次区块剪取api接收网页多层次区块剪取api回调页面所传递的所述网页B的信息,并将所述网页B的信息保存至javascript数组变量中。关于网页B的信息保存方式同网页A的信息保存方式,故于此不再赘述。
[0016] 于步骤105,当在所述网页B进行区块剪取时,调用网页多层次区块剪取api进行网页剪取及保存操作。具体而言,当在所述网页B进行区块剪取时,所述网页多层次区块剪取api重新加载网页B并加上url参数cut=1,所述网页B加载完成后,通过获取cut=1标识,调用JavaScript函数为网页B创建网页框架B,并对所述网页框架B进行属性设置,并将所述网页框架B添加到网页B,为所述网页框架B添加各种鼠标事件以进行区域选择。其中,所述网页框架B的属性设置为:src设置为about:blank、背景设置为透明、宽度为网页B的宽度、高度为网页B的高度、浮动样式、margin为0、padding为0、zIndex为网页B的最大zIndex加1。
[0017] 此外,当用户在网页框架B完成区域选择后,生成确定按钮,用户点击确定按钮后,通过网页多层次区块剪取api向网页多层次区块剪取api回调页面传入所剪取网页的地址、剪取的区域宽度、剪取的区域高度、剪取区域的起点横纵坐标,网页多层次区块剪取api回调页面接收到传递信息后,将接收的信息传递给通过JavaScript的parent.parent调用的源网页JavaScript函数。源网页接收到上述信息后,保存所剪取网页的地址、剪取区域的起点横纵坐标、剪取的区域宽度、剪取的区域高度,并显示所述剪取区域。具体而言,进行网页剪取保存的设置例如为网页框架的src属性为所剪取网页地址、paddingLeft为负剪取的横坐标、paddingTop为负剪取的纵坐标、width为剪取的宽度、height为剪取的高度,并将网页框架添加到网页中,从而实现对所剪取区块的显示等操作。
[0018] 另外,若用户需在网页A、网页A的其他链接地址或者网页B的链接地址相应的网页上进行网页剪取,其网页剪取的具体过程同在网页B上的剪取过程。故于此不再赘述。
[0019] 综上所述,根据本发明较佳实施例提供的网页多层次区块剪取方法,通过网页多层次区块剪取api可以实现网页A或者网页A的子页面的剪取。于本发明中,当用户需要进行网页剪取时,再主动触发网页剪取功能进行剪取,确保用户能正常进行网页剪取操作。如此,网页区块剪取不局限于单个页面,用户可以根据自己的需求选择网页进行网页区块剪取,提高了用户体验。而且,本发明实现的网页多层次区块剪取方法完全基于网页实现,无需下载任何插件,方便、快捷、高效,能够在视频会议、远程教育等嵌入使用,应用范围广泛。
[0020] 以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。