Ich habe es in eine separate js-Datei geschrieben und window.onload=function(){} verwendet, um Ladeprobleme zu vermeiden
1. Fügen Sie die js-Datei aus dem Body ein kann nicht verwendet werden; l?schen Sie window.onload=function(){} in der Datei, und es kann verwendet werden
3. Es kann nicht verwendet werden, unabh?ngig davon, ob es direkt in den Code oder die Datei eingefügt wird
4. Die Konsole meldet keinen Fehler und kann debuggt werden. Suchen Sie diese js-Datei im Browser.
Ich glaube, es liegt ein Problem beim Laden der Seite vor. Ich kann nicht sagen, was das Problem konkret ist. . .
Posten Sie den Code
<!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 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>
Der js-Code sieht so aus
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;');
}
}
}
小伙看你根骨奇佳,潛力無限,來學(xué)PHP伐。
首先提一個建議:關(guān)于文件命名最好不要夾雜中文,一般也不以數(shù)字開頭,有很多命名規(guī)范自己可以找找看看。
關(guān)于問題:控制臺沒報(bào)錯且能在調(diào)試器中找到這個js文件
:只要你使用了window.onload=function(){}
,js代碼是肯定執(zhí)行的,不論你是放在head里面還是body里面,也不論你是不是以文件的形式引入的,里面的代碼都會執(zhí)行。
從body里插入js文件,不能用;文件中刪掉window.onload=function(){},能用
:html中的onclick="showPic(this)"
,這個showPic函數(shù)是定義在全局作用域下面的,不能用window.onload包裹,當(dāng)你包裹的時(shí)候,showPic的作用域就處于onload這個函數(shù)里面了,在全局作用域下找不到showPic,所以點(diǎn)擊時(shí),showPic函數(shù)里面的代碼沒有執(zhí)行
,其他的js代碼是執(zhí)行的,你看看a標(biāo)簽里面已經(jīng)添加上了onclick等代碼。
寫在head里,無論直接插入代碼還是文件,都不能用
:涉及到dom查詢,這個時(shí)候dom樹還沒構(gòu)建完成,所以查詢不到a標(biāo)簽。寫在head里面的dom查詢js代碼要用window.onload包裹一下,但是你要把showPic這個函數(shù)提出來放在全局作用域下,這樣才能正常運(yùn)行。
@張冬冬 回答的沒毛病,但是他用的是element.onclick綁定事件的方法(你注釋掉的代碼),這個時(shí)候,在作用域鏈上是能找到showPic函數(shù)的,所以能執(zhí)行。
@stephenhuang 寫在onload里面的showPic代碼能運(yùn)行?
script應(yīng)該放在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文件是自上而下的執(zhí)行方式,但引入的css和javascript的順序有所不同,css引入執(zhí)行加載時(shí),程序仍然往下執(zhí)行,而執(zhí)行到<script>腳本是則中斷線程,待該script腳本執(zhí)行結(jié)束之后程序才繼續(xù)往下執(zhí)行。
所以,大部分網(wǎng)上討論是將script腳本放在<body>之后,那樣dom的生成就不會因?yàn)殚L時(shí)間執(zhí)行script腳本而延遲阻塞,加快了頁面的加載速度。
但又不能將所有的script放在body之后,因?yàn)橛幸恍╉撁娴男Ч膶?shí)現(xiàn),是需要預(yù)先動態(tài)的加載一些js腳本。所以這些腳本應(yīng)該放在<body>之前。
所以,我認(rèn)為script放置位置的原則“頁面效果實(shí)現(xiàn)類的js應(yīng)該放在body之前,動作,交互,事件驅(qū)動的js都可以放在body之后”。
首先script是可以放在head里面的,而且有很多網(wǎng)站這樣使用,比如頁面打開就要判斷是否是手機(jī)端還是pc端的js方法等等。
其次,針對你這個問題,我稍微修改了一點(diǎn),測試可以運(yùn)行的啊。只改了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代碼寫的不對。
太感謝了,這下終于明白是怎么回事了!建議很有用收下了。
不小心寫到答案區(qū)了,不過既然寫了那就寫點(diǎn)有用的吧,添加幾行代碼
讓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;}
}
}
//上面這段代碼為了使所有函數(shù)共享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指代不明,樓上大神解釋得很棒),其實(shí)只要換成被注釋掉的那一段或者樓上改的那一段就行了。如果堅(jiān)持不換,把window.onload事件換成上文第一段函數(shù)也能行。