CN102915371B

CN102915371B - 在网页中动态引用文件的方法

Info

Publication number: CN102915371B
Application number: CN201210435333.8A
Authority: CN
Inventors: 蒋烁淼; 吕亮亮; 方达宏
Original assignee: SHANGHAI GOKUAI NETWORK TECHNOLOGY Co Ltd
Current assignee: SHANGHAI GOKUAI NETWORK TECHNOLOGY Co Ltd
Priority date: 2012-11-02
Filing date: 2012-11-02
Publication date: 2015-04-15
Anticipated expiration: 2032-11-02
Also published as: CN102915371A

Abstract

本发明公开了一种在网页中动态引用文件的方法，在浏览器中收藏一个包含第一Javascript代码的项目，并在用户需要引用云存储文件的网页上触发这个项目，执行第一Javascript代码，在需要引用云存储文件的网页上生成一个iframe子框架并加载第二Javascript代码，在生成的iframe子框架中载入包含第三Javascript代码的指定页面，在所述iframe子框架中触发第三Javascript代码与第二Javascript代码通信，实现文件的引用。本发明的方法避免了用户手动编码，在任意网页中都能够很方便的实现云存储文件的引用，适用范围广，应用便捷。

Description

在网页中动态引用文件的方法

技术领域

本发明属于Web网页技术领域，尤其涉及一种在网页中引用云存储中文件的方法。

背景技术

随着互联网的发展，人们通过网络进行商业活动，通过网络进行协同工作，通过网络分享各自的精彩生活，互联网已经成为工作、生活、学习的一个平台。云存储技术的出现便于将自己的数据存放在云端，人们可以使用任意设备在任何地点接入互联网时，都能读取和操作存放在云端的数据。目前常用的云存储方案中，用户的数据存储在云存储服务器，用户的任意设备在任意地点接入互联网，都可以拿到存储在云存储服务器中的数据，并且可以实现多台终端的灵活运用，不限制在哪一台终端。例如用户具有手机和笔记本电脑两种终端，均能在任意地点任意时间享受云存储的服务。

同时，在很多情况下，人们在使用某些网站提供的应用或者自己建网站时，需要引用文件，目前常用的文件引用办法有框架标签iFrame引用，对象标签object引用，行为（Behavior的download方式）引用和嵌入脚本Javascript或者flash方式的引用。

基于云存储技术的云端在线文件的引用，常用的文件引用方法通常是服务端生成一串代表文件的链接，用户通过剪切和粘贴的方法将这个文件链接张贴到需要的网页中。也有一种改进的方式，通过在目标网页中嵌入一段脚本语言（Javascript代码）或者一个flash来显示云存储中的在线文件列表，供用户选择和插入。但是这种方式需要目标网页的管理者在其网页代码中做修改，插入Javascript代码或者flash代码，而不是在任意的网页中都可以实现。

发明内容

本发明的目的就是解决如何在任意网页上叠加显示云存储中文件列表并且在列表中选取文件、产生链接并插入到此网页输入框中的问题。

一种在网页中动态引用文件的方法，包括步骤：

1）、在浏览器中收藏一个包含第一Javascript代码的项目；

2）、在需要引用文件的网页上触发所述项目，执行第一Javascript代码，在该网页上生成一个iframe子框架并加载第二Javascript代码；

3）、在生成的iframe子框架中载入包含第三Javascript代码的指定页面；

4）、在所述iframe子框架中触发第三Javascript代码与第二Javascript代码通信，实现文件的引用。

所述在浏览器中收藏一个包含第一Javascript代码的项目是指在浏览器收藏夹内或书签中收藏包含第一Javascript代码的项目。

所述执行第一Javascript代码，在该网页上生成一个iframe子框架，是指在该网页上叠加显示一个指定尺寸、指定位置和指定网页内容的iframe子框架；或者是在该网页上生成一个iframe子框架，是指在该网页上插入一个指定尺寸、指定位置和指定网页内容的iframe子框架。

进一步地，所述步骤4）包括步骤：

4.1）、在子框架中进行操作触发子框架内网页的第三Javascript代码的运行；

4.2）、第三Javascript代码根据具体操作指令产生对应的一串字符串并且与第二Javascript代码交互，向第二Javascript代码提交该字符串；

4.3）、第二Javascript代码搜索当前光标所处的输入框，将第三Javascript代码提交的字符串插入到输入框中。

进一步地，步骤4.3）进一步包括步骤：

第二Javascript代码搜索当前光标所处的输入框，修改该输入框的<input>或者<textarea>标签内容，将第三Javascript代码提交的字符串插入到输入框中；

浏览器根据修改后的<input>或者<textarea>标签内容，在输入框中显示出插入的字符串。

进一步地，所述子框架内网页为云存储文件列表网页，所述具体操作指令为文件引用指令，根据具体操作指令产生对应的一串字符串为引用文件的链接。

本发明在网页中动态引用文件的方法，云服务存储商在其自己的网页上提供一个包含第一Javascript代码的标签，用户可以收藏这个标签，并在用户需要引用云存储文件的网页上触发这个标签，执行第一Javascript代码，在需要引用云存储文件的网页上生成一个iframe子框架，iframe子框架中显示云服务存储文件列表网页，用户可以操作云服务存储文件列表网页，引用其中的云存储文件，并将引用的云存储文件的链接直接输入到光标所在的输入框中。本发明的方法避免了用户手动编码，在任意网页中都能够很方便的实现云存储文件的引用，适用范围广，应用便捷。

附图说明

图1为本发明在网页中动态引用文件的方法的流程图；

图2为本发明文件引用代码交互流程图。

具体实施方式

下面结合附图和实施例对本发明技术方案做进一步详细说明，以下实施例不构成对本发明的限定。

本发明在网页中动态引用文件的方法，通过让用户在收藏夹或书签栏中收藏一段带有Javascript脚本的项目，在需要时点击该项目以触发脚本的运行来引用文件。需要说明的是，超文本标记语言HTML（Hyper TextMarkup Language）是一种结构化的语言，采用标签来描述网页内容，本发明说明书中出现的各种网页标签（<html>标签），如<iframe>标签，<a>标签，<script>标签等都是现有技术中常用的网页标签，这里不再一一赘述。

本实施例以在网页中引用云存储中文件的方法为例来对本发明的方法进行详细说明，如图1所示，包括步骤：

步骤101、在浏览器的收藏夹或者书签栏中收藏一个包含第一Javascript代码的项目。

具体地，本实施例中云存储服务商可以在自己网页上提供一个包含第一Javascript代码(下面简称JS_A)的<a>标签，这个标签可以显示一个名称，例如“云存储文件管理器”，目前包括IE、Chrome、Safari、Opera在内的主流浏览器都支持在收藏夹或者书签中收藏这种脚本项目。

这个<a>标签的一个样例如下：

用户将上述标签收藏到浏览器的收藏夹或者书签栏中，这个<a>标签会在收藏夹或者书签栏中上显示一个“云存储文件管理器”文字链接，点击这个链接就可以触发运行<a>标签中包含的JS_A。

步骤102、在需要引用文件的网页上触发上述收藏夹内的项目，在该网页上生成一个iframe子框架并加载第二Javascript代码。

用户在操作网页时，例如建设自己的网站，需要引用云存储中的文件，则点击收藏夹或书签栏中收藏的“云存储文件管理器”项目，JS_A受到触发开始运行。JS_A的功能是在任意当前网页中跨域加载第二Javascript代码(JS_B)，并在当前网页的指定位置，如右上角，创建一个可视区域用于用户登录或显示云存储文件列表。

需要说明的是，第一Javascript代码是服务商根据需要定制的，可以在当前网页插入一段字符串或者查找并删除当前网页上的某一段特定字符串，上述字符串包括当前网页的html标签或者任何出现在当前网页html代码中的字符串。该第一Javascript代码可根据实际情况做不同的配置，一种方式是直接将所有代码都写入，即直接将在当前网页中加入一个<iframe>标签的代码和JS-B代码都写入，完成所有的功能；另一种方式是执行后，在任意当前网页动态创建一个<script>标签，该<script>标签用于从指定网址跨域加载一段新的Javascrip，这段新的Javascrip中包含第二Javascrip代码（JS-B），新的Javascrip一旦加载完毕即自动运行，运行结果是在当前网页中加入一个<iframe>标签，并运行JS-B。

该<iframe>标签会在当前页面中创建一个包含iframe子框架的div块，该iframe子框架的指向云存储服务商网站中的一个具体页面，如果当前用户处于登录状态则直接进入登录状态显示文件列表，否则，显示登录界面。

第二Javascript（下面简称JS_B）还用以确定当前光标在网页中的位置以寻找到活动的输入框以及接收子框架中的Javascript（下面简称JS_C）提交的字符串。

步骤103、在生成的iframe子框架中载入包含第三Javascript代码的指定页面。

具体地，上述<iframe>标签插入该网页之后会在该网页以指定位置和指定大小叠加显示一个子框架，所生成的子框架可以指定位置，指定大小，并指定显示的某个特定URL所指向的网页，该子框架可以在网页上叠加显示，或者插入到网页中进行显示。这个子窗口包含某个特定URL所指向的网页，在本实施例中子框架中载入云存储文件管理器的网页。生成的iframe子框架中具有第三Javascript代码(JS_C)，第三Javascript代码本来就在云存储文件管理器的网页中。

步骤104、在子框架中操作触发子框架中第三Javascript代码与第二Javascript代码通信，实现文件的引用。

具体地，用户在子框架的云存储文件管理器中可以登录自己的云存储帐户、查看云存储中的文件列表甚至可以上传文件到自己的云存储帐户中去。用户还可以在子框架的云存储文件管理器中选取一个文件，进行引用操作，例如：点击“插入”按钮以触发子框架中的Javascript(JS_C)的运行。JS_C从服务后台获取到该文件的链接并且提交给JS_B，JS_B在需要引用文件的网页上搜索到光标所在的输入框并且修改此输入框对应的网页单行文本输入框<input>或者<textarea>标签的内容，这样这个输入框中就插入了该文件链接。

如图2所示，包括步骤：

步骤201、在子框架中进行操作触发子框架内网页的第三Javascript代码的运行；

步骤202、第三Javascript代码根据具体操作指令产生对应的一串字符串并且与第二Javascript代码交互，向第二Javascript代码提交该字符串；

步骤203、第二Javascript代码搜索当前光标所处的输入框，将第三Javascript代码提交的字符串插入到标签中。

即第二Javascript代码搜索当前光标所处的输入框，修改该输入框的网页单行文本输入框<input>或者网页多行文本输入框<textarea>标签内容，将第三Javascript代码提交的字符串插入到标签中；浏览器根据修改后的<input>或者<textarea>标签内容，在输入框中显示出插入的字符。在本实施例中，第三Javascript代码根据用户操作产生一串字符串是根据用户选取的文件从服务后端取回一串代表这个文件的链接，提交该文件链接插入光标处并在输入框中显示出插入的文件链接完成云存储中文件的引用。

通过以上步骤，可以针对任意网页的html代码进行插入字符串或者删除字符串。进一步的，可以在任意网页的html代码中插入或者删除html标签，从而达到插入iframe子框架以显示特定网页比如云存储文件列表，再通过在任意网页中插入Javascript代码实现任意网页与子框架的通信，嵌入的iframe与被嵌入的页面之间的通信是通过封装的一个js方法来实现的，该方法会根据浏览器的类型调用不同的底层实现方法：对于Chrome，IE8+,FireFox,Opera,Safari等浏览器是通过HTML5标准中的跨文档消息传输API实现iFrame与主页面的跨域通信；对于IE6,IE7浏览器及IE8的兼容模式，通过flash作为代理实现iframe与主页面的通信。具体实现方法：当用户点击子框架中文件链接时，子框架中的JS_C会向服务端发送引用文件的请求，在请求成功后，服务端会返回该文件的引用地址，JS_C在获得了该文件的引用地址后会调用封装好的通信方法postMessage向被嵌入的页面发送一个JSON格式的数据，该数据包含了文件的引用地址，被嵌入的页面通过封装的方法接收到iframe的发送过来的数据后会将该文件的链接地址插入到用户的输入光标之后从，而实现文件的快速引用功能。

通过上述步骤，可以在任意网页上引用云存储中的文件，而不需要事先对网页代码进行修改，或者人工进行剪切粘贴。

以上实施例仅用以说明本发明的技术方案而非对其进行限制，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明所附的权利要求的保护范围。

Claims

1.一种在网页中动态引用文件的方法，其特征在于，包括步骤：

1)、在浏览器中收藏一个包含第一Javascript代码的项目；

2)、在需要引用文件的网页上触发所述项目，执行第一Javascript代码，在该网页上生成一个iframe子框架并加载第二Javascript代码；

3)、在生成的iframe子框架中载入包含第三Javascript代码的指定页面；

4)、在所述iframe子框架中触发第三Javascript代码与第二Javascript代码通信，实现文件的引用；

所述步骤4)包括步骤：

4.1)、在子框架中进行操作触发子框架内网页的第三Javascript代码的运行；

4.2)、第三Javascript代码根据具体操作指令产生对应的一串字符串并且与第二Javascript代码交互，向第二Javascript代码提交该字符串；

4.3)、第二Javascript代码搜索当前光标所处的输入框，将第三Javascript代码提交的字符串插入到输入框中。

2.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，所述在浏览器中收藏一个包含第一Javascript代码的项目是指在浏览器收藏夹内或书签中收藏包含第一Javascript代码的项目。

3.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，所述执行第一Javascript代码，在该网页上生成一个iframe子框架，是指在该网页上叠加显示一个指定尺寸、指定位置和指定网页内容的iframe子框架。

4.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，所述执行第一Javascript代码，在该网页上生成一个iframe子框架，是指在该网页上插入一个指定尺寸、指定位置和指定网页内容的iframe子框架。

5.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，步骤4.3)进一步包括步骤：

6.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，所述子框架内网页为云存储文件列表网页。

7.根据权利要求1所述的在网页中动态引用文件的方法，其特征在于，所述具体操作指令为文件引用指令，根据具体操作指令产生对应的一串字符串为引用文件的链接。