CN106383710A

CN106383710A - 一种网页嵌入方法

Info

Publication number: CN106383710A
Application number: CN201610832760.8A
Authority: CN
Inventors: 刘楫汇
Original assignee: Chengdu Zhidaochuangyu Information Technology Co Ltd
Current assignee: Chengdu Zhidaochuangyu Information Technology Co Ltd
Priority date: 2016-09-19
Filing date: 2016-09-19
Publication date: 2017-02-08

Abstract

本发明公开了一种网页嵌入方法，包括以下步骤：A、读取需要嵌入的内容；B、原页面加载完成后，执行引入嵌入内容的Javascript程序；C、将步骤B中的Javascript程序根据嵌入的内容不同，插入到不同的位置；D、在页面需要嵌入内容的位置使用script标签，引入步骤C中生成的Javascript程序；本发明浏览器在显示原页面内容的同时再去加载嵌入内容，可以提高页面的加载时间。

Description

一种网页嵌入方法

技术领域

本发明涉及一种网页嵌入方法，具体涉及一种网页嵌入第三方内容的方法。

背景技术

随着互联网服务的丰富，现在网站越来越多的需要集成第三方服务，如：微博点赞按钮、分享到QQ空间的按钮；但是直接集成第三方的内容或者代码，就会严重影响原页面首次加载时间；特别是对于处于2G网络的移动端用户，平均每增加30KB左右的内容就会使页面加载时间增加1秒；现有的嵌入方法中，对于HTML内容通常通过iframe标签嵌入，这种方式，在使用iframe标签嵌套页面时，浏览器会等待被嵌入页面的内容加载完成后才执行原页面的Javascriptt程序，使得页面加载速度变慢；并且默认情况下由于浏览器的安全策略会对被嵌入页面的Javascriptt程序的以下行为：进行提交表单、AJAX请求、创建新窗口弹出对话框、执行Javascript程序、对Cookie本地存储的读写、执行插件等进行限制；对于CSS样式通常通过HTML的link标签嵌入，直接通过link标签将嵌入的CSS文件引入，浏览器会等待引入CSS文件下载并且渲染完成后才执行Javascript程序，从而导致原页面首屏显示变慢；对于Javascript程序通常通过style标签嵌入，直接通过script标签将嵌入的Javascript程序引入，浏览器会等待引入Javascript程序下载并且渲染完成后才执行Javascript程序；并且在执行Javascript程序的时候，引入的Javascript程序会占用原页面Javascript程序的资源，使得原页面首屏加载、呈现变慢。

发明内容

本发明提供一种嵌入内容时，加载速度较快的网页嵌入方法。

本发明采用的技术方案是：一种网页嵌入方法，包括以下步骤：

A、读取需要嵌入的内容；

B、原页面加载完成后，执行引入嵌入内容的Javascript程序；

C、将步骤B中的Javascript程序根据嵌入的内容不同，插入到不同的位置；

D、在页面需要嵌入内容的位置使用script标签，引入步骤C中生成的Javascript程序。

进一步的，所述步骤A中根据嵌入内容不同，读取的格式不同；HTML内容作为字符串读入；Javascript程序和CSS样式读入引用地址。

进一步的，所述步骤C中嵌入HTML内容，通过调用document.write函数将HTML内容字符串写入当前位置。

进一步的，所述步骤C中嵌入CSS样式文件，创建新的link元素插入到body标签的最后一个子元素后。

进一步的，所述步骤C中嵌入Javascript程序，创建新的script元素插入到body标签的最后一个子元素后。

本发明的有益效果是：

（1）本发明通过Javascript程序的方式嵌入页面，将嵌入页面内容阻塞到原页面加载完成后再加载，使嵌入内容的加载不会影响到原页面的显示，提高页面的加载时间；

（2）本发明能避免浏览器对于iframe标签的同源策略和安全策略的限制。

附图说明

图1为本发明流程图。

具体实施方式

下面结合附图和具体实施例对本发明做进一步说明。

如图1所示，一种网页嵌入方法，包括以下步骤：

A、读取需要嵌入的内容；

B、原页面加载完成后，执行引入嵌入内容的Javascript程序；

进一步的，所述步骤C中嵌入HTML内容，通过调用document.write函数将HTML内容字符串写入当前位置；实现此过程的相关代码为：document.write（‘被嵌入的HTML内容’）。

进一步的，所述步骤C中嵌入CSS样式文件，创建新的link元素插入到body标签的最后一个子元素后；相关实现代码为：

var style = document.createElement(‘link')

style.rel=‘preload’;

style.as = ‘style’;

style.herf = ‘引用地址';

style.onload = function() {

this.rel = ‘stylesheet;

}.bind(style)；。

进一步的，所述步骤C中嵌入Javascript程序，创建新的script元素插入到body标签的最后一个子元素后；相关实现代码为：

var embedScript = document.createElement('script');

embedScript.type = 'text/javascript';

embedScript.async = true;

embedScript.src = '引用地址';

document.getElementsByTagName(‘body’)[0]).appendChild(embedScript);。

本发明通过引入嵌入内容的Javascript程序，在原网页加载完成之后，根据嵌入内容的不同将需要嵌入页面的内容写入到不同的位置；因为原网页已经加载完成，浏览器可以在显示原网页内容的同时再去加载嵌入的内容，用户感知不到因为嵌入内容导致的加载内容变多；这样就可以使嵌入内容的加载不会影响到原页面的显示，从而提高页面的加载时间；通过实验可以证明使用本发明方法和原页面在2G网络下加载进行对比，可以看到原页面的加载完成的时间为55s，使用本方法之后页面加载时间缩短到了40s；首次显示首屏页面的时间原页面为30s，而使用本方法之后首次显示首屏页面的时间为15s；本发明还能避免浏览器对于iframe标签的同源策略和安全策略限制。

文中：HTML指超文本标记语言，是一种用于创建网页的标准标记语言；

Javascript指网页中用于逻辑处理的程序语言；

CSS指一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言；

Iframe指内嵌框架。

Claims

1.一种网页嵌入方法，其特征在于，包括以下步骤：

A、读取需要嵌入的内容；

B、原页面加载完成后，执行引入嵌入内容的Javascript程序；

2.根据权利要求1所述的一种网页嵌入方法，其特征在于，所述步骤A中根据嵌入内容不同，读取的格式不同；HTML内容作为字符串读入；Javascript程序和CSS样式读入引用地址。

3.根据权利要求1所述的一种网页嵌入方法，其特征在于，所述步骤C中嵌入HTML内容，通过调用document.write函数将HTML内容字符串写入当前位置。

4.根据权利要求1所述的一种网页嵌入方法，其特征在于，所述步骤C中嵌入CSS样式文件，创建新的link元素插入到body标签的最后一个子元素后。

5.根据权利要求1所述的一种网页嵌入方法，其特征在于，所述步骤C中嵌入Javascript程序，创建新的script元素插入到body标签的最后一个子元素后。