如何在运行时将 JavaScript 和 CSS 文件添加到网页
5.00/5 (3投票s)
如何在运行时将 JavaScript 和 CSS 文件添加到网页。
介绍
如果您真的想让您的网站加载更快，并且想在 y-slow 等工具中获得良好的网站排名，请查看以下流程。这些概念是我自己开发的，并且我也以各种方式进行了验证，我还将提供示例代码进行测试。如果您正在做某些事情，请暂停 10 分钟，阅读以下步骤，这将使任何网站更快，并提供良好的 y-slow 排名。
如果您真的考虑到网站的加载时间，我们只需要应用程序的 20% 到 30% 或最多 40% 的 JavaScript，而其余 60% 到 70% 的 JavaScript 我们在页面加载时毫无理由地加载了。CSS 文件也是如此...... 但是，如果我们实现一个概念，即我们可以在页面加载时加载所需的 JavaScript 和 CSS，并在以后需要时添加其余的 JavaScript 或 CSS 文件 - 那么我们将实现我们的目标。
如何做到这一点
- 首先：我们必须根据不同的功能将 JavaScript 和 CSS 文件拆分为多个文件。
- 第二：仅将所需的 JavaScript 和 CSS 文件添加到您的网页
- 第三：在页面加载后，在运行时添加所需的 JavaScript 和 CSS 文件。
使用代码
动态添加 JavaScript 文件
var path = "scriptFolder"
var script = document.createElement( 'script' );
script.src = path + '/jsFile.js';
document.getElementsByTagName( 'head' )[0].appendChild( script );
动态添加 CSS 文件
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/style.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
示例
这是一个简单的例子和一些步骤来描述整个功能。
<div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd">
http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="javascripts/main.js"></script>
</head>
<body>
<input type="button" name="check1" id="check1"
value="box1" onClick="showbox('box1')">
<input type="button" name="check2"
id="check2" value="box2" onClick="showbox('box2')">
<div style="display:none;" id="box1">
<input type="button" onClick="function1()"
value="Box1 function1() call in (js1.js) file">
</div>
<div style="display:none;" id="box2">
<input type="button" onClick="function2()"
value="Box2 function2() call in (js2.js) file">
</div>
</body>
</html></div>
这里我使用了两个按钮（name="check1" & name="check2"）和两个隐藏的 div（id="box1" & id="box2"），点击按钮会隐藏一个 div 并打开一个 div，这些 div 在 *style.css* 文件中定义了一些类，每个 div 都有一个按钮，并且有一个 onclick 事件，我们将其保存在 js1.js 和 js2.js 文件中 - 如果你稍微思考一下，我们不需要在加载时加载 js1.js 和 js2.js 文件，如果你看到该页面，我们只需要在页面加载时调用 showbox (boxid) 的 JavaScript onclick 函数。
在Main.js中
var is_js1 = 0;
var is_js2 = 0;
var is_css1 = 0;
function showbox(id)
{
if(id == 'box1')
{
//adding css
if(is_css1 == 0)
{
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/style.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById('box2').style.display='none';
document.getElementById('box1').style.display='block';
/***********Add JS**********/
if(is_js1 == 0)
{
var path = "javascripts"
var script = document.createElement( 'script' );
//style.rel = 'stylesheet';
//style.type = 'text/css';
script.src = path + '/js1.js';
//style.media = 'screen';
document.getElementsByTagName( 'head' )[0].appendChild( script );
is_js1 = 1;
}
}
else
{
//adding css
if(is_css1 == 0)
{
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/style.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById('box2').style.display='block';
document.getElementById('box1').style.display='none';
/***********Add JS**********/
if(is_js2 == 0)
{
var path = "javascripts"
var script = document.createElement( 'script' );
//style.rel = 'stylesheet';
//style.type = 'text/css';
script.src = path + '/js2.js';
//style.media = 'screen';
document.getElementsByTagName( 'head' )[0].appendChild( script );
is_js2 = 1;
}
}
}
在页面加载时，我们需要这个函数，在这里我们正在隐藏和显示 div，但在这里我们也添加了 CSS 和 JavaScript 文件。我使用了 3 个全局变量来检查是否已经添加了文件，如果已添加，它将不会再次将这些文件添加到网页。
function function1()
{
alert("box1 function");
}
这是 js 文件，其中包含 Demo.html 中 <input type="button" onClick="function2()" value="Box2 function2() call in (js2.js) file"> 的函数。
在 CSS 文件中
.myclass
{
border:2px solid #CC6600;width:400px; height:40px;
}
.myclass2
{
width:400px; height:40px; border:3px solid green;
}
在此文件中，我们保留 index.html 的 box1 和 box2 的类。
另一种异步加载 JavaScript 的方法
通常，我们会通过在 head 元素中添加一个 script 标签来将脚本文件添加到 .aspx 页面中，例如：<script type="text/javascript" src="script/TestScript.js"></script>。
这种方法有一个缺陷。加载脚本文件会阻止页面的渲染。（您可以在低带宽网络或 JavaScript 文件太大时注意到这一点）。为了避免这个问题，经验丰富的程序员建议在 html 文档的末尾加载脚本。
但让我们探索一些更好的方法将 JavaScript 加载到页面上
1. 使用 DEFER：您可以在 script 元素中使用 'defer' 来延迟脚本块的执行。 虽然这是 HTML 4 规范的一部分，但只有 IE4+ 正确支持它。 示例：<script defer="defer" type="text/javascript" src="script/TestScript.js">。
2. 使用 AJAX：您可以使用它来动态获取 Javascript 文件并使用它。 步骤
- 创建一个 XMLHTTpRequest 对象
- 使用 AJAX 获取 JavaScript 文件
- EVAL() 结果
例如。
// Create the XMLHttpRequest object
// This varies form browser to browser, so I leave it to you
var ajaxObj = GetXHRObject();
// As usual set a call back handler and use eval() the result
ajaxObj.onreadystatechange = function() {
if (ajaxObj.readyState != 4 ) return;
eval(ajaxObj.responseText);
};
ajaxObj.open('GET', 'script/TestScript.js', true);
ajaxObj .send('');
3. 使用 document.Write() 你可以在 head 元素中写入一个脚本 -
document.write("<script type="text/javascript" src="text/javascript">" +
"</script><span style="font-family: Courier New;"><script type='text/javascript'
src='text/javascript'>" + "</script></span>");
4. 使用 script DOM 元素：步骤
1. 创建一个 script 元素（类型为 script）
var scriptElement = document.createElement('script');
2. 设置新创建元素的类型
scriptElement.type = "text/javascript";
3. 设置元素的 src 属性
scriptElement.src = "script/TestScript.js";
4. 获取 head 元素并将 script 元素注入其中
var headElement = document.getElementsByTagName('head')[0];
headElement.appendChild(scriptElement);
放在一起
<head runat="server">
<script type="text/javascript">
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = "script/TestScript.js";
document.getElementsByTagName('head')[0].appendChild(scriptElement);
</script>
</head>
结论
请在本地创建这些文件或加载现有文件并打开您的 firebug - 打开 head 标签，您可以看到只有 main.js 被添加了，现在点击第一个按钮，您可以看到 js1.js 和 style.css 已添加到您的 head 标签中，它打开 div 并且 div 具有 CSS 类属性，通过点击 box1 按钮它会弹出 alert("box1 function"); 当您单击 box2 按钮时重复该过程。 谢谢。