javascript - js程式碼放在body裡能用,放head裡就不能用了?
伊谢尔伦
伊谢尔伦 2017-05-19 10:24:41
0
5
758

我把寫在了單獨的js檔案中,並且用了window.onload=function(){}防止載入問題
1.直接從body插入程式碼,能用;
2.從body插入js文件,不能用;文件中刪掉window.onload=function(){},能用;
3.寫在head裡,無論直接插入程式碼或文件,都不能用;
4.控制台沒報錯且能在偵錯器中找到這個js檔。
覺得是頁面載入出問題了,具體哪裡的問題,說不上來。 。 。
貼上程式碼吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片库</title>
        <link rel="stylesheet" type="text/css" href="4.2图片库.css"/>
        <script src="4.2图片库.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>我的图片库</h1>
        <a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
        <ul>
            <li>
                <a href="images/捕获0.png" title="截图一" class="pic">截图一</a>
            </li>
            <li>
                <a href="images/捕获1.png" title="截图二" class="pic">截图二</a>
            </li>
            <li>
                <a href="images/捕获2.png" title="截图三" class="pic">截图三</a>
            </li>
            <li>
                <a href="images/捕获3.png" title="截图四" class="pic">截图四</a>
            </li>
        </ul>
        <img src="images/示例图片.jpg"/ id="placeholder" alt="图片库封面">
        <p id="alt">封面:</p>
    </body>
</html>

js程式碼是這樣的

window.onload=function(){
    function showPic(whichpic){
        var source=whichpic.getAttribute('href'); 
        var place_holder=document.getElementById('placeholder');                
        place_holder.src=source;
        var p=document.getElementById("alt");
        var text=whichpic.getAttribute('title');
        p.firstChild.nodeValue=text;
    }
    var lis=document.getElementsByTagName('a');
    for(i=0;i<lis.length;i++){
        if(lis[i].getAttribute('class')=='pic'){
//            lis[i].onclick=function(){
//                showPic(this);
//                return false;
//            }    
            lis[i].setAttribute('onclick','showPic(this);return false;');
        }
    }
}
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回覆(5)
曾经蜡笔没有小新

首先提一個建議:關於文件命名最好不要夾雜中文,一般也不以數字開頭,有很多命名規範自己可以找找看看。

關於問題:
控制台没报错且能在调试器中找到这个js文件:只要你使用了window.onload=function(){},js程式碼是肯定執行的,不論你是放在head裡面還是body裡面,也不論你是不是以檔案的形式引入的,裡面的程式碼都會執行。

从body里插入js文件,不能用;文件中删掉window.onload=function(){},能用:html中的onclick="showPic(this)",这个showPic函数是定义在全局作用域下面的,不能用window.onload包裹,当你包裹的时候,showPic的作用域就处于onload这个函数里面了,在全局作用域下找不到showPic,所以点击时,showPic函数里面的代码没有执行,其他的js程式碼是執行的,你看a標籤裡面已經加了onclick等程式碼。

写在head里,无论直接插入代码还是文件,都不能用:涉及到dom查詢,這時候dom樹還沒建置完成,所以查詢不到a標籤。寫在head裡面的dom查詢js程式碼要用window.onload包裹一下,但是你要把showPic這個函數提出來放在全域作用域下,這樣才能正常運作。

@張冬冬 回答的沒毛病,但是他用的是element.onclick綁定事件的方法(你註解掉的程式碼),這個時候,在作用域鏈上是能找到showPic函數的,所以能執行。

@stephenhuang 寫在onload裡面的showPic程式碼能運作?

迷茫

script應該放在body下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link rel="stylesheet" type="text/css" href="4.2图片库.css"/>
</head>
<body>
    <p id="box">id</p>
     <script src="4.2图片库.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

首先要了解的是:

html檔案是自上而下的執行方式,但引入的css和javascript的順序有所不同,css引入執行載入時,程式仍然往下執行,而執行到

所以,大部分網路討論是將script腳本放在

之後,那樣dom的生成就不會因為長時間執行script腳本而延遲阻塞,加快了頁面的載入速度。

但又不能將所有的script放在body之後,因為有一些頁面的效果的實現,是需要預先動態的載入一些js腳本。所以這些腳本應該放在

之前。

所以,我認為script放置位置的原則「頁面效果實現類別的js應該放在body之前,動作,交互,事件驅動的js都可以放在body之後」。

巴扎黑

因為放在head裡面,遇到js標籤就去下載js了,dom渲染還沒完成,這時js取不到dom元素。

左手右手慢动作

首先script是可以放在head裡面的,而且有很多網站這樣使用,例如頁面打開就要判斷是否是手機端還是pc端的js方法等等。
其次,針對你這個問題,我稍微修改了一點,測試可以運行的啊。只改了js部分,html部分沒動。

window.onload=function(){

function showPic(whichpic){
    var source=whichpic.getAttribute('href'); 
    var place_holder=document.getElementById('placeholder');                
    place_holder.src=source;
    var p=document.getElementById("alt");
    var text=whichpic.getAttribute('title');
    p.firstChild.nodeValue=text;
}
var lis=document.getElementsByTagName('a');
for(i=0;i<lis.length;i++){
    if(lis[i].getAttribute('class')=='pic'){
        lis[i].onclick=function(event){
            showPic(this);
            event.preventDefault();
        }    
     
    }
}

}

所以可能還是js程式碼寫的不對。

phpcn_u1582

太感謝了,這下終於明白是怎麼回事了!建議很有用收下了。
不小心寫到答案區了,不過既然寫了那就寫點有用的吧,加入幾行程式碼
讓lis[i].setAttribute('onclick','showPic(this);return false;');這樣的寫法也能發揮作用:

addLoadEvent(pics)
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){window.onload=func;}
    else{window.onload=function(){oldonload();func;}
    }
}
//上面这段代码为了使所有函数共享window.onload事件
function pics(){
    var lis=document.getElementsByTagName('a');
        for(i=0;i<lis.length;i++){
        if(lis[i].getAttribute('class')=='pic'){
//            lis[i].onclick=function(){
//                showPic(this);
//                return false;
//            }    
            lis[i].setAttribute('onclick','showPic(this);return false;');
        }
    }
}```

主要就是最后一行代码的问题(this指代不明,楼上大神解释得很棒),其实只要换成被注释掉的那一段或者楼上改的那一段就行了。如果坚持不换,把window.onload事件换成上文第一段函数也能行。
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板