WO2013102371A1 - Multi-level web page block clipping method - Google Patents
Multi-level web page block clipping method Download PDFInfo
- Publication number
- WO2013102371A1 WO2013102371A1 PCT/CN2012/084332 CN2012084332W WO2013102371A1 WO 2013102371 A1 WO2013102371 A1 WO 2013102371A1 CN 2012084332 W CN2012084332 W CN 2012084332W WO 2013102371 A1 WO2013102371 A1 WO 2013102371A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- webpage
- level block
- api
- clipping
- source
- Prior art date
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Definitions
- the invention belongs to the technical field of networks, and in particular relates to a multi-level block clipping method for web pages. Background technique
- the existing page block clipping can only cut the first-level page, that is, only the page opened by the user's home page can be cut. If the user wants to open a guide page first, and the page that you want to clip is the page that the guide page clicks in, the page clipping cannot be implemented. For example, if the user opens the Sina homepage, the user does not have the willingness to cut the webpage, and after clicking on a certain newspage, the user is willing to cut the webpage. At this time, the webpage clipping is required, and the current webpage clipping technology cannot implement the webpage. Clipping. Therefore, the current web page clipping technology cannot conform to the user's operating habits and will affect the user experience. Summary of the invention
- the invention provides a multi-level block clipping method for webpages to solve the above problems.
- the invention provides a multi-level block clipping method for webpages.
- the method includes the following steps: a user inputs a web address on an input control of a source webpage, and a source webpage creates a webpage frame to load a webpage A corresponding to the webpage; the webpage A invokes a webpage multi-level blockcutting api to save the webpage A
- the webpage of the source webpage displays the webpage B corresponding to the link through the webpage multi-level block clipping API;
- the webpage B calls the webpage multi-level block
- the api saves the information of the webpage B.
- the webpage multi-level block api is called to perform the webpage clipping and saving operation.
- the clipping of the sub-page of the webpage A or the webpage A can be realized by the multi-level block clipping API of the webpage.
- the webpage clipping function is actively triggered to perform clipping, so as to ensure that the user can perform the webpage clipping operation normally.
- the webpage block clipping is not limited to a single page, and the user can select a webpage according to his own needs to perform webpage block clipping, thereby improving the user experience.
- the multi-level block clipping method of the webpage implemented by the invention is completely based on the webpage implementation, and does not need to download any plug-ins, which is convenient, fast and high. Effective, can be embedded in video conferencing, distance education, etc., and has a wide range of applications.
- FIG. 1 is a flow diagram of a web page multi-level tile clipping method provided in accordance with a preferred embodiment of the present invention. detailed description
- FIG. 1 is a flow diagram of a web page multi-level tile clipping method provided in accordance with a preferred embodiment of the present invention. As shown in FIG. 1, the method for clipping a webpage multi-level block provided by the preferred embodiment of the present invention includes step 101105.
- step 101 the user inputs a web address on the input control of the source webpage, and the source webpage creates a webpage frame to display the webpage A corresponding to the webpage.
- the user opens the source webpage, enters a web address (eg, www.sina.com) in the input control (eg, text box) of the source webpage, and the source webpage creates a webpage framework by the document.createElement method (eg, using ifr) And assigning the src of the webpage frame to the webpage, and adding the webpage framework to the source webpage.
- the web page A corresponding to the web address can be loaded and displayed on the source web page.
- step 102 the webpage A invokes a webpage multi-level block clipping api to save the information of the webpage A.
- the webpage multi-level block clipping API is used to automatically generate the webpage frame m after the webpage is loaded, and set the src attribute of the webpage frame m to the webpage multi-level block clipping api callback page, and is used for Adding the webpage frame m to the webpage;
- the webpage multi-level block clipping API is used to append all links in the webpage with an onclick event; for changing the src attribute of the webpage frame m
- the information of the webpage is transmitted to the multi-level block clipping api callback page in the form of a URL parameter, and the multi-level block of the webpage clips the api callback page by calling the page of the source webpage through the parent.parent
- the secondary block clips the api callback function to save the information of the web page.
- the webpage multi-level block clipping API is used to attach all the links in the webpage to the onclick event, and the user clicks on any link in the webpage to execute only the onclick event of the link, and does not perform related Jump, the onclick event will send the address of the link of the triggered onclick event to the callback page of the api of the multi-level block of the web page.
- the webpage information is transmitted to the webpage multi-level block clipping api callback page by changing the src attribute of the webpage frame m.
- the page multi-level block clipping api callback page is loaded by solving the URL url, width, height three parameter values to get the information of the loaded web page.
- Multi-level block clipping api callback page The same-origin webpage is a domain name, so the multi-level block of the webpage cuts the api callback page by calling the multi-level block of the source webpage of the parent.parent to cut the api callback function, and passing the The obtained url, width, and height values are saved by the source web page.
- the related attribute of the webpage A is transmitted to the multi-level block of the webpage to cut the api callback page, and the source webpage receives the webpage through the multi-level block of the webpage.
- the multi-level block clips the webpage A address, webpage A width, and webpage height parameter passed by the api callback page, and saves it to the javascript array variable array variable, so that the user can perform the webpage clipping operation.
- step 103 when the link on the webpage A is clicked, the webpage of the webpage of the source webpage is displayed on the webpage frame of the source webpage by the webpage multi-level block clipping API. Specifically, when the user has no desire to cut on the web page A, the user can click on the relevant link in the web page A to enter the corresponding web page 8.
- the link address parameter of the link is added to the URL by reloading the webpage multi-level block clipping api callback page, and the webpage multi-level block clipping api callback page receives the link.
- the api function of the webpage created by the source webpage is changed by calling the api function of the webpage of the source webpage by the parent.parent to load the webpage B corresponding to the link.
- step 104 the webpage B invokes a webpage multi-level block clipping api to save the information of the webpage B.
- the webpage multi-level block clipping api After loading the webpage B in the webpage frame of the source webpage, the webpage multi-level block clipping api receiving webpage multi-level block clipping the information of the webpage B delivered by the api callback page, and the webpage B is The information is saved to a javascript array variable. Information about how to save information on page B is the same as that on page A. The method of saving interest, so it will not be repeated here.
- step 105 when the page B is cut in the webpage B, the webpage multi-level block clipping API is invoked to perform the webpage clipping and saving operation.
- the attribute of the webpage frame B is set to: src is set to ab 0U t : bl a nk, the background is set to be transparent, the width is the width of the webpage B, the height is the height of the webpage B, the floating style, the margin is 0, padding For 0, zlndex is the maximum zlndex of page B plus 1.
- the determining button is generated, and after the user clicks the OK button, the api callpage is cut out from the multi-level block of the webpage by the multi-level block of the webpage, and the api callback page is transmitted to the cut-out webpage.
- the web page multi-level block clips the api callback page to receive the delivery information, and then passes the received information to the parent via JavaScript.
- the source webpage After receiving the above information, the source webpage saves the address of the clipped webpage, the starting horizontal and vertical coordinates of the clipped area, the clipped area width, the clipped area height, and displays the clipped area.
- the setting for saving the webpage is, for example, the src attribute of the webpage frame is the clipped webpage address, the abscissa of the paddingLeft is negatively cut, the ordinate of the paddingTop is negatively cut, and the width is the width of the clipped, Height is the height of the clipping, and the web page frame is added to the web page to realize the display of the clipped block.
- the sub-page of the webpage A or the webpage A can be clipped by the multi-level block clipping API of the webpage.
- the webpage clipping function is actively triggered to perform clipping, so as to ensure that the user can perform the webpage clipping operation normally.
- the webpage block clipping is not limited to a single page, and the user can select a webpage according to his own needs to perform webpage block clipping, thereby improving the user experience.
- the multi-level block clipping method of the webpage implemented by the invention is completely based on the webpage implementation, and does not need to download any plug-ins, which is convenient and fast. Efficient, can be embedded in video conferencing, distance education, etc., and has a wide range of applications.
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Provided is a multi-level web page block clipping method. The method comprises the following steps: a user inputting a URL at an input control of a source web page, the source web page creating a web page framework to load and display a web page A corresponding to the URL; the web page A invoking a multi-level web page block to clip the information about the web page A stored by an api; when clicking a link on the web page A, clipping the web page framework of the api on the source web page to display a web page B corresponding to the link; the web page B invoking the multi-level web page block to clip the information about the web page B stored by the api; and when carrying out block clipping on the web page B, invoking the multi-level web page block to clip the api to carry out a web page clipping and storing operation.
Description
说 明 书 Description
一种网页多层次区块剪取方法 技术领域 Multi-level block clipping method for webpage
本发明属于网络技术领域， 尤其涉及一种网页多层次区块剪取方法。 背景技术 The invention belongs to the technical field of networks, and in particular relates to a multi-level block clipping method for web pages. Background technique
目前，现有进行网页区块剪取只能剪取一级页面， 即只能剪取用户首页打开 的网页。如果用户想先打开一个引导页， 而想剪取的页面是引导页面点进去的页 面， 则无法实现网页剪取。 例如， 用户打开新浪首页， 此时用户没有网页剪取的 意愿， 而在点击至某个新闻页面后产生了剪取意愿， 此时需要进行网页剪取， 目 前的网页剪取技术无法实现上述网页的剪取。因此， 目前的网页剪取技术无法符 合用户的操作习惯， 会影响用户体验。 发明内容 At present, the existing page block clipping can only cut the first-level page, that is, only the page opened by the user's home page can be cut. If the user wants to open a guide page first, and the page that you want to clip is the page that the guide page clicks in, the page clipping cannot be implemented. For example, if the user opens the Sina homepage, the user does not have the willingness to cut the webpage, and after clicking on a certain newspage, the user is willing to cut the webpage. At this time, the webpage clipping is required, and the current webpage clipping technology cannot implement the webpage. Clipping. Therefore, the current web page clipping technology cannot conform to the user's operating habits and will affect the user experience. Summary of the invention
本发明提供一种网页多层次区块剪取方法， 以解决上述问题。 The invention provides a multi-level block clipping method for webpages to solve the above problems.
本发明提供一种网页多层次区块剪取方法。上述方法包括以下步骤： 用户于 源网页的输入控件输入网址，源网页创建网页框架以加载显示所述网址对应的网 页 A; 所述网页 A调用网页多层次区块剪取 api保存所述网页 A的信息； 于所 述网页 A上的链接被点击时，通过网页多层次区块剪取 api在所述源网页的网页 框架显示该链接对应的网页 B; 所述网页 B调用网页多层次区块剪取 api保存所 述网页 B的信息； 当在所述网页 B进行区块剪取时， 调用网页多层次区块剪取 api进行网页剪取及保存操作。 The invention provides a multi-level block clipping method for webpages. The method includes the following steps: a user inputs a web address on an input control of a source webpage, and a source webpage creates a webpage frame to load a webpage A corresponding to the webpage; the webpage A invokes a webpage multi-level blockcutting api to save the webpage A When the link on the webpage A is clicked, the webpage of the source webpage displays the webpage B corresponding to the link through the webpage multi-level block clipping API; the webpage B calls the webpage multi-level block The api saves the information of the webpage B. When the webpage B is clipped, the webpage multi-level block api is called to perform the webpage clipping and saving operation.
相较于先前技术，根据本发明提供的网页多层次区块剪取方法， 通过网页多 层次区块剪取 api可以实现网页 A或者网页 A的子页面的剪取。 于本发明中， 当用户需要进行网页剪取时， 再主动触发网页剪取功能进行剪取， 确保用户能正 常进行网页剪取操作。 如此， 网页区块剪取不局限于单个页面， 用户可以根据自 己的需求选择网页进行网页区块剪取， 提高了用户体验。而且， 本发明实现的网 页多层次区块剪取方法完全基于网页实现， 无需下载任何插件， 方便、 快捷、 高
效， 能够在视频会议、 远程教育等嵌入使用， 应用范围广泛。 附图说明 Compared with the prior art, according to the multi-level block clipping method of the webpage provided by the present invention, the clipping of the sub-page of the webpage A or the webpage A can be realized by the multi-level block clipping API of the webpage. In the present invention, when the user needs to perform webpage clipping, the webpage clipping function is actively triggered to perform clipping, so as to ensure that the user can perform the webpage clipping operation normally. In this way, the webpage block clipping is not limited to a single page, and the user can select a webpage according to his own needs to perform webpage block clipping, thereby improving the user experience. Moreover, the multi-level block clipping method of the webpage implemented by the invention is completely based on the webpage implementation, and does not need to download any plug-ins, which is convenient, fast and high. Effective, can be embedded in video conferencing, distance education, etc., and has a wide range of applications. DRAWINGS
此处所说明的附图用来提供对本发明的进一步理解， 构成本申请的一部分， 本发明的示意性实施例及其说明用于解释本发明， 并不构成对本发明的不当限 定。 在附图中： The drawings described herein are provided to provide a further understanding of the invention, and are intended to be a part of the invention. In the drawing:
图 1 所示为根据本发明的较佳实施例提供的网页多层次区块剪取方法的流 程图。 具体实施方式 1 is a flow diagram of a web page multi-level tile clipping method provided in accordance with a preferred embodiment of the present invention. detailed description
下文中将参考附图并结合实施例来详细说明本发明。需要说明的是， 在不冲 突的情况下， 本申请中的实施例及实施例中的特征可以相互组合。 The invention will be described in detail below with reference to the drawings in conjunction with the embodiments. It should be noted that, in the case of non-conflict, the features in the embodiments and the embodiments in the present application may be combined with each other.
图 1 所示为根据本发明的较佳实施例提供的网页多层次区块剪取方法的流 程图。如图 1所示， 本发明较佳实施例提供的网页多层次区块剪取方法包括步骤 101 105。 1 is a flow diagram of a web page multi-level tile clipping method provided in accordance with a preferred embodiment of the present invention. As shown in FIG. 1, the method for clipping a webpage multi-level block provided by the preferred embodiment of the present invention includes step 101105.
于步骤 101， 用户于源网页的输入控件输入网址， 源网页创建网页框架以加 载显示所述网址对应的网页 A。 具体而言， 用户打开源网页， 在源网页的输入控 件 （例如， 文本框） 中输入网址 （例如， www.sina.com )， 源网页通过 document.createElement方法创建网页框架（例如， 用 ifr表示）， 将所述网页框架 的 src赋值为所述网址， 并将所述网页框架添加到源网页中。 如此， 所述网址对 应的网页 A可在源网页加载显示。 In step 101, the user inputs a web address on the input control of the source webpage, and the source webpage creates a webpage frame to display the webpage A corresponding to the webpage. Specifically, the user opens the source webpage, enters a web address (eg, www.sina.com) in the input control (eg, text box) of the source webpage, and the source webpage creates a webpage framework by the document.createElement method (eg, using ifr) And assigning the src of the webpage frame to the webpage, and adding the webpage framework to the source webpage. Thus, the web page A corresponding to the web address can be loaded and displayed on the source web page.
于步骤 102，所述网页 A调用网页多层次区块剪取 api保存所述网页 A的信 息。 In step 102, the webpage A invokes a webpage multi-level block clipping api to save the information of the webpage A.
于本实施例中， 网页多层次区块剪取 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回调地址} ?111"1={所加载网页地址 }&width=^ f加载网页宽 度}&1 §1«={所加载网页高度}。如此， 网页多层次区块剪取 api回调页面加载时 通过解决 URL的 url、 width, height三个参数值得到所加载网页的信息。 由于网 页多层次区块剪取 api回调页面同源网页是一个域名， 所以网页多层次区块剪取 api回调页面通过 parent.parent调用源网页的网页多层次区块剪取 api回调函数， 并传入所获取到的 url、 width, height值， 由源网页进行保存。 In this embodiment, the webpage multi-level block clipping API is used to automatically generate the webpage frame m after the webpage is loaded, and set the src attribute of the webpage frame m to the webpage multi-level block clipping api callback page, and is used for Adding the webpage frame m to the webpage; the webpage multi-level block clipping API is used to append all links in the webpage with an onclick event; for changing the src attribute of the webpage frame m The information of the webpage is transmitted to the multi-level block clipping api callback page in the form of a URL parameter, and the multi-level block of the webpage clips the api callback page by calling the page of the source webpage through the parent.parent The secondary block clips the api callback function to save the information of the web page. Wherein, the webpage multi-level block clipping API is used to attach all the links in the webpage to the onclick event, and the user clicks on any link in the webpage to execute only the onclick event of the link, and does not perform related Jump, the onclick event will send the address of the link of the triggered onclick event to the callback page of the api of the multi-level block of the web page. In addition, when the loaded webpage needs to call the webpage multi-level block clipping api to save various states, the webpage information is transmitted to the webpage multi-level block clipping api callback page by changing the src attribute of the webpage frame m. For example, the src attribute of the web frame m can be set to: http://{source page}/{page multi-level block clipping api callback address} ?111"1={loaded web address}&width=^ floading webpage Width}&1 § 1«={loaded page height}. Thus, the page multi-level block clipping api callback page is loaded by solving the URL url, width, height three parameter values to get the information of the loaded web page. Multi-level block clipping api callback page The same-origin webpage is a domain name, so the multi-level block of the webpage cuts the api callback page by calling the multi-level block of the source webpage of the parent.parent to cut the api callback function, and passing the The obtained url, width, and height values are saved by the source web page.
具体而言， 当源网页中的网页框架加载网页 A后， 将网页 A的相关属性传 入网页多层次区块剪取 api回调页面中， 源网页通过网页多层次区块剪取 api接 收到网页多层次区块剪取 api回调页面所传递的网页 A地址、 网页 A宽度、 网 页 A高度参数后， 保存至 javascript数组变量数组变量中， 以备用户进行网页剪 取操作使用。 Specifically, after the webpage frame in the source webpage loads the webpage A, the related attribute of the webpage A is transmitted to the multi-level block of the webpage to cut the api callback page, and the source webpage receives the webpage through the multi-level block of the webpage. The multi-level block clips the webpage A address, webpage A width, and webpage height parameter passed by the api callback page, and saves it to the javascript array variable array variable, so that the user can perform the webpage clipping operation.
于步骤 103， 于所述网页 A上的链接被点击时， 通过网页多层次区块剪取 api在所述源网页的网页框架显示该链接对应的网页 B。 具体而言， 当用户在网 页 A上无剪取意愿时， 用户可点击网页 A中的相关链接进入相应的网页8。 于 所述网页 A上的链接被点击时，通过重新加载网页多层次区块剪取 api回调页面 在 URL中加入所述链接的链接地址参数， 网页多层次区块剪取 api回调页面接 收上述链接地址参数时，通过 parent.parent调用源网页的网页多层次区块剪取 api 函数改变源网页创建的网页框架的 src属性， 以加载所述链接对应的网页 B。 In step 103, when the link on the webpage A is clicked, the webpage of the webpage of the source webpage is displayed on the webpage frame of the source webpage by the webpage multi-level block clipping API. Specifically, when the user has no desire to cut on the web page A, the user can click on the relevant link in the web page A to enter the corresponding web page 8. When the link on the webpage A is clicked, the link address parameter of the link is added to the URL by reloading the webpage multi-level block clipping api callback page, and the webpage multi-level block clipping api callback page receives the link. When the address parameter is used, the api function of the webpage created by the source webpage is changed by calling the api function of the webpage of the source webpage by the parent.parent to load the webpage B corresponding to the link.
于步骤 104，所述网页 B调用网页多层次区块剪取 api保存所述网页 B的信 息。于所述源网页的网页框架加载所述网页 B后， 网页多层次区块剪取 api接收 网页多层次区块剪取 api回调页面所传递的所述网页 B的信息， 并将所述网页 B 的信息保存至 javascript数组变量中。关于网页 B的信息保存方式同网页 A的信
息保存方式， 故于此不再赘述。 In step 104, the webpage B invokes a webpage multi-level block clipping api to save the information of the webpage B. After loading the webpage B in the webpage frame of the source webpage, the webpage multi-level block clipping api receiving webpage multi-level block clipping the information of the webpage B delivered by the api callback page, and the webpage B is The information is saved to a javascript array variable. Information about how to save information on page B is the same as that on page A. The method of saving interest, so it will not be repeated here.
于步骤 105， 当在所述网页 B 进行区块剪取时， 调用网页多层次区块剪取 api进行网页剪取及保存操作。 具体而言， 当在所述网页 B进行区块剪取时， 所 述网页多层次区块剪取 api重新加载网页 B并加上 url参数 cut=l， 所述网页 B 加载完成后， 通过获取 cut=l标识， 调用 JavaScript函数为网页 B创建网页框架 B， 并对所述网页框架 B进行属性设置， 并将所述网页框架 B添加到网页 B， 为 所述网页框架 B添加各种鼠标事件以进行区域选择。 其中， 所述网页框架 B的 属性设置为： src设置为 ab0Ut:blank、 背景设置为透明、 宽度为网页 B的宽度、 高度为网页 B的高度、 浮动样式、 margin为 0、 padding为 0、 zlndex为网页 B 的最大 zlndex加 1。 In step 105, when the page B is cut in the webpage B, the webpage multi-level block clipping API is invoked to perform the webpage clipping and saving operation. Specifically, when performing the block clipping on the webpage B, the webpage multi-level block clipping api reloads the webpage B and adds the url parameter cut=l, and after the webpage B is loaded, obtaining The cut=l identifier, the JavaScript function is called to create a webpage frame B for the webpage B, and the webpage framework B is attribute set, and the webpage framework B is added to the webpage B, and various mouse events are added to the webpage framework B. For regional selection. The attribute of the webpage frame B is set to: src is set to ab 0U t : bl a nk, the background is set to be transparent, the width is the width of the webpage B, the height is the height of the webpage B, the floating style, the margin is 0, padding For 0, zlndex is the maximum zlndex of page B plus 1.
此外， 当用户在网页框架 B完成区域选择后， 生成确定按钮， 用户点击确 定按钮后， 通过网页多层次区块剪取 api向网页多层次区块剪取 api回调页面传 入所剪取网页的地址、剪取的区域宽度、剪取的区域高度、剪取区域的起点横纵 坐标， 网页多层次区块剪取 api回调页面接收到传递信息后， 将接收的信息传递 给通过 JavaScript的 parent.parent调用的源网页 JavaScript函数。源网页接收到上 述信息后，保存所剪取网页的地址、剪取区域的起点横纵坐标、剪取的区域宽度、 剪取的区域高度， 并显示所述剪取区域。具体而言， 进行网页剪取保存的设置例 如为网页框架的 src 属性为所剪取网页地址、 paddingLeft为负剪取的横坐标、 paddingTop为负剪取的纵坐标、 width为剪取的宽度、 height为剪取的高度， 并 将网页框架添加到网页中， 从而实现对所剪取区块的显示等操作。 In addition, when the user completes the area selection in the webpage frame B, the determining button is generated, and after the user clicks the OK button, the api callpage is cut out from the multi-level block of the webpage by the multi-level block of the webpage, and the api callback page is transmitted to the cut-out webpage. The address, the width of the clipped area, the height of the clipped area, and the starting point of the clipped area. The web page multi-level block clips the api callback page to receive the delivery information, and then passes the received information to the parent via JavaScript. The source web page JavaScript function called by parent. After receiving the above information, the source webpage saves the address of the clipped webpage, the starting horizontal and vertical coordinates of the clipped area, the clipped area width, the clipped area height, and displays the clipped area. Specifically, the setting for saving the webpage is, for example, the src attribute of the webpage frame is the clipped webpage address, the abscissa of the paddingLeft is negatively cut, the ordinate of the paddingTop is negatively cut, and the width is the width of the clipped, Height is the height of the clipping, and the web page frame is added to the web page to realize the display of the clipped block.
另外， 若用户需在网页 、 网页 A的其他链接地址或者网页 B的链接地址 相应的网页上进行网页剪取， 其网页剪取的具体过程同在网页 B上的剪取过程。 故于此不再赘述。 In addition, if the user needs to perform webpage clipping on the webpage, the other link address of the webpage A, or the webpage corresponding to the webpage B, the specific process of the webpage clipping is the same as the clipping process on the webpage B. Therefore, it will not be repeated here.
综上所述，根据本发明较佳实施例提供的网页多层次区块剪取方法， 通过网 页多层次区块剪取 api可以实现网页 A或者网页 A的子页面的剪取。 于本发明 中， 当用户需要进行网页剪取时， 再主动触发网页剪取功能进行剪取， 确保用户 能正常进行网页剪取操作。 如此， 网页区块剪取不局限于单个页面， 用户可以根 据自己的需求选择网页进行网页区块剪取， 提高了用户体验。而且， 本发明实现 的网页多层次区块剪取方法完全基于网页实现，无需下载任何插件，方便、快捷、
高效， 能够在视频会议、 远程教育等嵌入使用， 应用范围广泛。 In summary, according to the multi-level block clipping method of the webpage provided by the preferred embodiment of the present invention, the sub-page of the webpage A or the webpage A can be clipped by the multi-level block clipping API of the webpage. In the present invention, when the user needs to perform webpage clipping, the webpage clipping function is actively triggered to perform clipping, so as to ensure that the user can perform the webpage clipping operation normally. In this way, the webpage block clipping is not limited to a single page, and the user can select a webpage according to his own needs to perform webpage block clipping, thereby improving the user experience. Moreover, the multi-level block clipping method of the webpage implemented by the invention is completely based on the webpage implementation, and does not need to download any plug-ins, which is convenient and fast. Efficient, can be embedded in video conferencing, distance education, etc., and has a wide range of applications.
以上所述仅为本发明的优选实施例而已， 并不用于限制本发明， 对于本领域 的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内， 所作的任何修改、 等同替换、 改进等， 均应包含在本发明的保护范围之内。
The above is only the preferred embodiment of the present invention, and is not intended to limit the present invention, and various modifications and changes can be made to the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and scope of the present invention are intended to be included within the scope of the present invention.
Claims
1、 一种网页多层次区块剪取方法， 其特征在于， 包括以下步骤： 用户于源网页的输入控件输入网址，源网页创建网页框架以加载显示所述网 址对应的网页 A; A webpage multi-level block clipping method, comprising the following steps: a user inputs a web address on an input control of a source webpage, and a source webpage creates a webpage frame to load and display a webpage A corresponding to the webpage;
所述网页 A调用网页多层次区块剪取 api保存所述网页 A的信息； 于所述网页 A上的链接被点击时，通过网页多层次区块剪取 api在所述源网 页的网页框架显示该链接对应的网页 B; The webpage A calls a webpage multi-level block clipping api to save the information of the webpage A; when the link on the webpage A is clicked, the webpage of the source webpage is clipped by the multi-level block of the webpage Display the web page B corresponding to the link;
所述网页 B调用网页多层次区块剪取 api保存所述网页 B的信息； 当在所述网页 B进行区块剪取时，调用网页多层次区块剪取 api进行网页剪 取及保存操作。 The webpage B calls the webpage multi-level block clipping api to save the information of the webpage B; when the webpage B performs the block clipping, the webpage multi-level block is called to cut the api for the webpage clipping and saving operation. .
2、 根据权利要求 1所述的网页多层次区块剪取方法， 其特征在于， 用户打 开源网页，在源网页的输入控件中输入网址，源网页通过 document.createElement 方法创建网页框架， 将所述网页框架的 src赋值为所述网址， 并将所述网页框架 添加到源网页中。 2. The method according to claim 1, wherein the user opens the source webpage, inputs a web address in an input control of the source webpage, and the source webpage creates a webpage framework by using the document.createElement method. The src of the web page framework is assigned to the web address, and the web page framework is added to the source web page.
3、 根据权利要求 1所述的网页多层次区块剪取方法， 其特征在于， 所述网 页多层次区块剪取 api用于在网页加载完成后自动生成网页框架 m， 并将网页框 架 m的 src属性设置为网页多层次区块剪取 api回调页面， 并用于将所述网页框 架 m添加至所述网页；所述网页多层次区块剪取 api用于将所述网页中的所有链 接附加上 onclick事件； 用于通过改变所述网页框架 m的 src属性将所述网页的 信息以 URL参数形式传递至网页多层次区块剪取 api回调页面， 网页多层次区 块剪取 api回调页面通过 parent.parent调用源网页的网页多层次区块剪取 api回 调函数以保存所述网页的信息。 The webpage multi-level block clipping method according to claim 1, wherein the webpage multi-level block clipping API is used to automatically generate a webpage frame m after the webpage is loaded, and the webpage frame m The src attribute is set to a webpage multi-level block clipping api callback page, and is used to add the webpage frame m to the webpage; the webpage multi-level block clipping api is used to use all the links in the webpage Attaching an onclick event; for transmitting the information of the webpage to the webpage multi-level block clipping api callback page by changing the src attribute of the webpage frame m, the webpage multi-level block clipping api callback page The api callback function is clipped by calling the multi-level block of the source webpage of the source webpage by parent.parent to save the information of the webpage.
4、 根据权利要求 3所述的网页多层次区块剪取方法， 其特征在于， 于所述 源网页的网页框架加载所述网页 A后，所述网页多层次区块剪取 api接收网页多 层次区块剪取 api回调页面所传递的所述网页 A的信息， 并将所述网页 A的信 息保存至 javascript数组变量中。 The multi-level block clipping method of the webpage according to claim 3, wherein after the webpage A of the source webpage loads the webpage A, the multi-level block of the webpage cuts the api to receive the webpage. The hierarchical block clips the information of the webpage A delivered by the api callback page, and saves the information of the webpage A into a javascript array variable.
5、 根据权利要求 3所述的网页多层次区块剪取方法， 其特征在于， 于所述 网页 A上的链接被点击时， 通过重新加载网页多层次区块剪取 api 回调页面在 URL中加入所述链接的链接地址参数，网页多层次区块剪取 api回调页面接收上 述链接地址参数时， 通过 parent.parent调用源网页的网页多层次区块剪取 api函 数改变源网页创建的网页框架的 src属性， 以加载所述链接对应的网页 B。 The method of claim 3, wherein when the link on the webpage A is clicked, the api callback page is clipped in the URL by reloading the multi-level block of the webpage. Join the link address parameter of the link, and the webpage multi-level block clipping api callback page receives When the link address parameter is described, the src attribute of the webpage created by the source webpage is changed by the api function of the webpage of the source webpage by the parent.parent, and the webpage B corresponding to the link is loaded.
6、 根据权利要求 5所述的网页多层次区块剪取方法， 其特征在于， 于所述 源网页的网页框架加载所述网页 B后，网页多层次区块剪取 api接收网页多层次 区块剪取 api回调页面所传递的所述网页 B的信息，并将所述网页 B的信息保存 至 javascript数组变量中。 The multi-level block clipping method of the webpage according to claim 5, wherein after the webpage frame of the source webpage loads the webpage B, the multi-level block of the webpage cuts the api to receive the multi-level zone of the webpage. The block clips the information of the webpage B delivered by the api callback page, and saves the information of the webpage B into a javascript array variable.
7、 根据权利要求 1所述的网页多层次区块剪取方法， 其特征在于， 当在所 述网页 B进行区块剪取时，所述网页多层次区块剪取 api重新加载网页 B并加上 url参数 cut=l， 所述网页 B加载完成后， 通过获取 cut=l标识， 调用 JavaScript 函数为网页 B创建网页框架 B， 并对所述网页框架 B进行属性设置， 并将所述 网页框架 B添加到网页 B， 为所述网页框架 B添加各种鼠标事件以进行区域选 择， The webpage multi-level block clipping method according to claim 1, wherein when the webpage B performs block editing, the webpage multi-level block clipping api reloads the webpage B and After the url parameter cut=l is added, after the webpage B is loaded, the webpage B is created for the webpage B by calling the JavaScript function by acquiring the cut=l identifier, and the webpage B is attributed to the webpage B, and the webpage is set. Frame B is added to web page B, and various mouse events are added to the web page frame B for area selection.
当用户在网页框架 B 完成区域选择后， 生成确定按钮， 用户点击确定按钮 后， 通过网页多层次区块剪取 api向网页多层次区块剪取 api回调页面传入所剪 取网页的地址、 剪取的区域宽度、 剪取的区域高度、 剪取区域的起点横纵坐标， 网页多层次区块剪取 api回调页面接收到传递信息后， 将接收的信息传递给通过 JavaScript的 parent.parent调用的源网页 JavaScript函数， After the user completes the area selection in the webpage frame B, the OK button is generated, and after the user clicks the OK button, the api callpage is cut out from the multi-level block of the webpage by the multi-level block of the webpage, and the address of the cut webpage is transmitted to the multi-level block of the webpage, The width of the clipped area, the height of the clipped area, and the starting point of the clipped area. The webpage multi-level block clips the api callback page to receive the delivery information, and then passes the received information to the parent.parent call via JavaScript. Source webpage JavaScript function,
源网页接收到上述信息后，保存所剪取网页的地址、剪取区域的起点横纵坐 标、 剪取的区域宽度、 剪取的区域高度， 并显示所述剪取区域。 After receiving the above information, the source webpage saves the address of the clipped webpage, the starting point of the clipping area, the width of the clipped area, the height of the clipped area, and displays the clipped area.
8、 根据权利要求 7所述的网页多层次区块剪取方法， 其特征在于， 所述网 页框架 B的属性设置为： src设置为 ab0Ut:blank、 背景设置为透明、 宽度为网页 B的宽度、 高度为网页 B的高度、 浮动样式、 margin为 0、 padding为 0、 zlndex 为网页 B的最大 zlndex加 1。 The webpage multi-level block clipping method according to claim 7, wherein the attribute of the webpage frame B is set to: src is set to ab 0U t : bl a nk, the background is set to be transparent, and the width is The width and height of the page B are the height of the page B, the floating style, the margin is 0, the padding is 0, and the zlndex is the maximum zlndex of the page B plus 1.
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012100018468A CN102446224B (en) | 2012-01-05 | 2012-01-05 | Multi-level webpage block clipping method |
| CN201210001846.8 | 2012-01-05 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2013102371A1 true WO2013102371A1 (en) | 2013-07-11 |
Family
ID=46008720
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2012/084332 WO2013102371A1 (en) | 2012-01-05 | 2012-11-08 | Multi-level web page block clipping method |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN102446224B (en) |
| WO (1) | WO2013102371A1 (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104866359A (en) * | 2015-06-01 | 2015-08-26 | 走遍世界（北京）信息技术有限公司 | Webpage loading method and device |
| US9672114B2 (en) | 2014-04-16 | 2017-06-06 | Microsoft Technology Licensing, Llc | Conditional saving of input data |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102446224B (en) * | 2012-01-05 | 2013-06-05 | 苏州阔地网络科技有限公司 | Multi-level webpage block clipping method |
| CN103488652B (en) * | 2012-06-08 | 2018-11-16 | 北京千橡网景科技发展有限公司 | Webpage content extracting method and webpage content extraction device |
| CN103870255B (en) * | 2012-12-12 | 2019-02-12 | 腾讯科技（深圳）有限公司 | Floatation element display methods and device |
| CN107562852B (en) * | 2017-08-28 | 2020-12-25 | 网易乐得科技有限公司 | Method, medium, device and computing equipment for displaying page in browser |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1357846A (en) * | 2000-12-08 | 2002-07-10 | 唯特科技股份有限公司 | Web page content selecting device, system and method |
| CN101216857A (en) * | 2008-01-07 | 2008-07-09 | 张尧森 | Web page area clipping and merging method |
| CN101615179A (en) * | 2008-06-25 | 2009-12-30 | 国际商业机器公司 | The method and system that is used for the cross-domain alternation of Web application |
| CN102446224A (en) * | 2012-01-05 | 2012-05-09 | 苏州阔地网络科技有限公司 | Multi-level webpage block clipping method |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090299862A1 (en) * | 2008-06-03 | 2009-12-03 | Microsoft Corporation | Online ad serving |
| CN102043832A (en) * | 2010-11-23 | 2011-05-04 | 苏州阔地网络科技有限公司 | Method for realizing cross-domain request callback on webpage |
-
2012
- 2012-01-05 CN CN2012100018468A patent/CN102446224B/en not_active Expired - Fee Related
- 2012-11-08 WO PCT/CN2012/084332 patent/WO2013102371A1/en active Application Filing
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1357846A (en) * | 2000-12-08 | 2002-07-10 | 唯特科技股份有限公司 | Web page content selecting device, system and method |
| CN101216857A (en) * | 2008-01-07 | 2008-07-09 | 张尧森 | Web page area clipping and merging method |
| CN101615179A (en) * | 2008-06-25 | 2009-12-30 | 国际商业机器公司 | The method and system that is used for the cross-domain alternation of Web application |
| CN102446224A (en) * | 2012-01-05 | 2012-05-09 | 苏州阔地网络科技有限公司 | Multi-level webpage block clipping method |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9672114B2 (en) | 2014-04-16 | 2017-06-06 | Microsoft Technology Licensing, Llc | Conditional saving of input data |
| US9934081B2 (en) | 2014-04-16 | 2018-04-03 | Microsoft Technology Licensing, Llc | Conditional saving of input data |
| CN104866359A (en) * | 2015-06-01 | 2015-08-26 | 走遍世界（北京）信息技术有限公司 | Webpage loading method and device |
| CN104866359B (en) * | 2015-06-01 | 2019-03-19 | 走遍世界（北京）信息技术有限公司 | Webpage loading method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102446224A (en) | 2012-05-09 |
| CN102446224B (en) | 2013-06-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2013102371A1 (en) | Multi-level web page block clipping method | |
| EP3278246B1 (en) | In-domain webpage editing | |
| US9552338B2 (en) | Mechanisms to compose, execute, save, and retrieve hyperlink pipelines in web browsers | |
| US7475406B2 (en) | Event notification structure for dynamically aggregated logical components | |
| US7805670B2 (en) | Partial rendering of web pages | |
| US10296558B1 (en) | Remote generation of composite content pages | |
| US8527862B2 (en) | Methods for making ajax web applications bookmarkable and crawlable and devices thereof | |
| CN102314469A (en) | Method for implementing cross-domain request callback | |
| CN106170789A (en) | For providing the method and system of Function Extension to the landing page of intention | |
| CN109376316B (en) | Method, system and server for dynamically loading route | |
| KR20100126313A (en) | Xml-based web feed for web access of remote resources | |
| KR20190028479A (en) | Cross-origin communication in a limited computer environment | |
| WO2015000383A1 (en) | Method, apparatus and system for information recommending | |
| KR20160125401A (en) | Inline and context aware query box | |
| US9876776B2 (en) | Methods for generating and publishing a web site based on selected items and devices thereof | |
| US9986057B2 (en) | UI framework support for portal systems | |
| CN111083219A (en) | Request processing method, device, equipment and computer readable storage medium | |
| CN104978207A (en) | Method for uploading file, browser and system | |
| TW201929507A (en) | Object uploading method and device | |
| CN104317819A (en) | Method and system for webpage cross-domain communication based on browsers | |
| US20150193393A1 (en) | Dynamic Display of Web Content | |
| KR101541089B1 (en) | Method, web-editor and computer-readable recording medium for image processing | |
| JP2023067734A (en) | Method for displaying state information, device, apparatus, and storage medium | |
| CN105446710B (en) | Interface providing system and interface providing method | |
| WO2016155525A1 (en) | Page module loading method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 12864046 Country of ref document: EP Kind code of ref document: A1 |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 12864046 Country of ref document: EP Kind code of ref document: A1 |