2016-08-07 5 views
2

私はこのトピックの利用可能なリンクを読みましたが、助けにはなりませんでした。JavaScriptがHTMLファイルで動作していません

私は次のコードを実行しようとしています。 "menu.html"は別のページのdivに "world.html"をロードし、HTMLは表示されますが、JavaScriptは表示されません。

私はJSを別のファイルに持っていましたが、実行していないときには "world.html"に移動しましたが、問題は解決しませんでした。私もjQueryを参照しようとしました。

これはmenu.htmlです:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="layout.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="contact.js"></script> 
     <script src="preparePage.js"></script> 
    </head> 

    <body> 
     <a id="infoButton" class="infoButton" href="info.html"></a> 
     <a id="bodyButton" class="bodyButton" href="body.html"></a> 
     <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a> 
     <a id="leaveButton" class="leaveButton" href="leave.html"></a> 
     <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a> 
    </body> 

    <footer> 
    </footer> 
</html> 

とメニューを取り除くと負荷がworld.htmlますpreparePage.js、:

function preparePage() { 
    document.getElementById("box").style.backgroundImage = "none"; 
    $("#infoButton").fadeOut("slow"); 
    $("#bodyButton").fadeOut("slow"); 
    $("#leaveButton").fadeOut("slow"); 
    $("#contactButton").fadeOut("slow"); 
    $("#box").load("world.html", function enter() { 
     $("#enterButton").fadeOut("slow"); 
    }); 
} 

そして最後にではなく、少なくとも、world.html :

<!DOCTYPE html> 

<html> 
    <head> 
     <script type="text/javascript"> 
     function wut() { 
      window.alert("owo"); 
     } 
     </script> 
    </head> 

    <body onload="wut(); return false;"> 
     mhfkhgfhtfjhfjj<br><br> 
     <canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas> 
    </body> 

    <footer> 
    </footer> 
</html> 

EDIT:またmenu.htmlするdiv要素を含むページでlaunchpad.html、およびworld.htm含みますL負荷:

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="layout.css"> 
     <link rel="stylesheet" type="text/css" href="menu.css"> 
    </head> 

    <body onload="openGame(); return false;"> 
     <div id="cloud"></div> 
     <div id="box" class="box"></div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="openGame.js"></script> 
    </body> 

     <footer> 
     </footer> 
</html> 

そしてopenGame.js、#boxの形状を変更し、負荷がmenu.html:

別にあなたが持つ要素を持っていないという明白な事実から
function openGame() { 
     $("#cloud").fadeOut("fast"); 
     $("#box").animate({ 
      height: '750px', 
      width: '1700px', 
      top: '100px', 
      left: '100px', 
      padding: '0px' 
     }); 
     $("#box").load("menu.html"); 
     document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')"; 
    } 
+0

いや、運:P – Nienaber

+1

あなたにid 'box'を持つ要素を持っていません。 – trincot

+0

コードの '#box'要素がありません。 –

答えて

0

id boxの場合、のloadメソッドは、 world.html で定義したonloadコールバックをトリガーしません。だからあなたはそれを自分で呼び出す必要があります。

だから、二つのことを修正:

  • は、例えば、boxを定義しますmenu.htmlから

    <div id="box"></div> 
    
  • コールwut()、:

    $("#box").load("world.html", function enter() { 
        wut(); 
        $("#enterButton").fadeOut("slow"); 
    }); 
    

ブラウザにありますので、次のようにロードされたときworld.htmlは効果がありませんonload=に既にロードされている1つの文書のみ。したがって、第2のloadイベントトリガーはありません。

代わりにあなただけのただ実行します終了</body>タグ、前に終わり近くに、world.htmlにスクリプトを追加することができます。

<script> 
    wut(); 
</script> 
+0

ありがとう、これは働いた!そのため、jQueryでHTMLをロードすると、必ずそのファイルにあるJavaScriptを呼び出す必要はありませんか?なぜこれが記事のどこかにある理由について、より多くの情報を見つけることは可能でしょうか? – Nienaber

+0

jQueryは 'load'メソッドでJavaScriptを実行するので、' wut'関数が定義されています。しかし、呼び出されることはありません。なぜなら、ドキュメントが読み込まれるときに呼び出されるだけなので( 'onload'と結びついています)、呼び出されることはありません。しかし、その文書は(world.html *だけでなく、全体の内容でもある)文書が既に読み込まれているため、そのイベントはトリガされません。私はこの情報を答えに加えます。 – trincot

+0

あなたはそれがうまくいったと書いていますが、答えを受け入れるようにマークできますか? – trincot

1

私は上のクリックのためのjQueryのを使用しますまた、スクリプト内で参照しているすべての要素IDがページに存在することを確認してください。また、スクリプトが適切に読み込まれていることを確認してください。Linuxサーバーでは、ファイル名の大文字小文字が重要です。

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="layout.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="contact.js"></script> 
    <script src="preparePage.js"></script> 
</head> 
<body> 
<ul id="menu"> 
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li> 
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li> 
<li><a id="enterButton" class="enterButton">test3</a></li> 
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li> 
<li><a id="contactButton" class="contactButton">test5</a></li> 
</ul> 
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a);"> 
test box 
</div> 
<footer> 
</footer> 
</body></html> 

Javascriptを:

$(document).ready(function() { 
     $("#enterButton").click(function() { 
     document.getElementById("box").style.backgroundImage = "none"; 
     $("#infoButton").fadeOut("slow"); 
     $("#bodyButton").fadeOut("slow"); 
     $("#leaveButton").fadeOut("slow"); 
     $("#contactButton").fadeOut("slow"); 
     $("#box").load("/zalun/VkCyH/app.html", function enter() { 
      $("#enterButton").fadeOut("slow"); 
     }) 
    }) 
    }); 

ライブ例:https://jsfiddle.net/ucjs77L8/

関連する問題