用原生js怎么动态添加一个js文件

用原生js怎么动态添加一个js文件,第1张

如果需要用原生js动态的加载另外一个js文件,可以使用原生js的document.createElement方法创建script节点,然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中,这样就可以了,参考代码如下:

var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾

上例中是在body的最末尾添加的,当然同样可以在head中添加引用该js的标签:document.head.appendChild(new_element)

有三种方法可以实现,分别如下:

第一种、直接document.write:

<script language="javascript">

document.write("<script src='test.js'><\/script>")

</script>

第二种、动态改变已有script的src属性

<script src='' id="s1"></script>

<script language="javascript">

s1.src="test.js"

</script>

第三种、动态创建script元素:

<script>

var oHead = document.getElementsByTagName('HEAD').item(0)

var oScript= document.createElement("script")

oScript.type = "text/javascript"

oScript.src="test.js"

oHead.appendChild( oScript)

</script>

注意:第三种方法使用时,请注意路径。

<script language="javascript">

$(function(){

$("#all").css({"height":"auto","width":"100%","overflow":"hidden","float":"left"})//追加样式

if($(document).height() >$(window).height()){

$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"auto","float":"left"})//追加样式

}

$(window).resize(function(){

$("#all").css({"height":"auto","width":"100%","overflow":"auto","float":"left"})//追加样式

if( $("#all").height() >= $(window).height()-35() ){

$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"auto","float":"left"})//追加样式

}else{

$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"hidden","float":"left"})//追加样式

}

})

}) 将要添加滚动条的部分用<DIV ID="all" ></div> 包含进来

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11660072.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存