外部Javascript文件未能從頭部的JavaScript塊中接收變量

我一直在尋找網絡幾個小時，無法在整個「外部js文件」 - 叢林中找到答案。我希望你們能幫忙！外部Javascript文件未能從頭部的JavaScript塊中接收變量

總之：我的外部似乎javascript文件不要讓我在main.php文件中定義的變量..

在main.php我定義的PHP變量和「改造「他們進入 JavaScript的變量

<head>... 
<script type="text/javascript"> 
var phpmain_img = <?php echo json_encode($main_img); ?>; 
var phpvar1_large = <?php echo json_encode($var1_large); ?>; 
var phpvar2_large = <?php echo json_encode($var2_large); ?>; 
var phpvar3_large = <?php echo json_encode($var3_large); ?>; 
var phpvar4_large = <?php echo json_encode($var4_large); ?>; 
</script> 
... 
<script language="javascript" type="text/javascript" src="/wshop/ext.js"></script> 
</head>

在我ext.js文件我想要處理這些變量。在main.php的swapImage（）...：在 ext.js文件我定義的函數swapImage（），將在主要用於PHP 回：

 var imgArray = new Array(
     phpmain_img, 
     phpvar1_large, 
     phpvar2_large, 
     phpvar3_large 
     ); 

    function swapImage(imgID) { 
     var theImage = document.getElementById('theImage'); 
     var newImg; 
     newImg = imgArray[imgID]; 
     theImage.src = newImg; 
    } 

    function preloadImages() {  
     for(var i = 0; i < imgArray.length; i++) { 
      var tmpImg = new Image; 
      tmpImg.src = imgArray[i]; 
     } 
    }

結果不工作

<div id="image"> 
    <img id="theImage" src="<?=$main_img; ?>" alt="" /> 
</div> 

<div id="thumbs"> 
<?php 

     echo "<img src=\"<$main_img_small\" alt=\"\" onmouseover=\"swapImage(0);\">"; 
     echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"swapImage(1);\">"; 
     echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"swapImage(2);\">"; 
     echo "<img src=\"$var3_small\" alt=\"\" onmouseover=\"swapImage(3);\">"; 

     ?> 


    <br /> 
</div>

任何幫助，不勝感激！

UPDATE：

我沒有得到一個特定的錯誤，swapImage功能，不以鼠標懸停工作。但是，我試圖用例如document.write(phpimg_main)但沒有出現這使我相信，有一些錯誤移交的變量...

這裏的源代碼瀏覽器輸出

<html> 
    <head> 
     <link href="../demo.css" rel="stylesheet" type="text/css" /> 
     <style type="text/css"> 
      .... 
</style> 

     <script type="text/javascript"> 
     var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"}; 
     var phpvar1_large = {"0":"http:\/\/path\/to\/image1.jpg"}; 
     var phpvar2_large = {"0":"http:\/\/path\/to\/image2.jpg"}; 
     var phpvar3_large = null; 
     var phpvar4_large = null; 
     </script> 

     <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script> 
</head> 




<body onload="preloadImages()"> 

    <div id="image"> 
     <img id="theImage" src="http://path-to-main-image.jpg" alt="" /> 
    </div> 

    <div id="thumbs"> 
    <img src="http://path-to-main-image.jpg" alt="" onmouseover="swapImage(0);"><img src="http://path-to-image1.jpg" alt="" onmouseover="swapImage(1);"><img src="http://path-to-image2.jpg" alt="" onmouseover="swapImage(2);"> 

     <br /> 
    </div> 



</body>

更新2：

感謝您的輸入和解答！當然，你是對的，我需要一個字符串而不是一個對象，所以編碼是一個很好的提示。

但是這個問題仍然沒有用[0]解決。即使我像下面那樣硬編碼，第二個JavaScript塊（我試圖外包作爲外部js文件之前）沒有得到在第一個JavaScript塊中定義的變量。

<script type="text/javascript"> 
     var phpmain_img = "http://www.abc.de/path-img_main.jpg"; 
     var phpvar1_large = "http://www.abc.de/path-img1.jpg"; 
     var phpvar2_large = "http://www.abc.de/path-img2.jpg"; 
     var phpvar3_large = "http://www.abc.de/path-img3.jpg"; 
     var phpvar4_large = "http://www.abc.de/path-img4.jpg"; 
     </script> 

<script language="javascript" type="text/javascript"> 


        var imgArray = new Array(
       phpmain_img, 
       phpvar1_large, 
       phpvar2_large, 
       phpvar3_large, 
       phpvar4_large 
      ); 



      function swapImage(imgID) { 
       var theImage = document.getElementById('theImage'); 
       var newImg; 
       newImg = imgArray[imgID]; 
       theImage.src = newImg; 
      } 

      function preloadImages() {  
       for(var i = 0; i < imgArray.length; i++) { 
        var tmpImg = new Image; 
        tmpImg.src = imgArray[i]; 
       } 
      } 



      </script>

瀏覽器源查看輸出：

<script type="text/javascript"> 
     var phpmain_img = "http://www.abc.de/path-img_main.jpg"; 
     var phpvar1_large = "http://www.abc.de/path-img1.jpg"; 
     var phpvar2_large = "http://www.abc.de/path-img2.jpg"; 
     var phpvar3_large = "http://www.abc.de/path-img3.jpg"; 
     var phpvar4_large = "http://www.abc.de/path-img4.jpg"; 
     </script> 

     <script language="javascript" type="text/javascript"> //this i actually wanted to outsource into an external js-file 

     var imgArray = new Array(
      phpmain_img, 
      phpvar1_large, 
      phpvar2_large, 
      phpvar3_large, 
      phpvar4_large 
     ); 



     function swapImage(imgID) { 
      var theImage = document.getElementById('theImage'); 
      var newImg; 
      newImg = imgArray[imgID]; 
      theImage.src = newImg; 
     } 

     function preloadImages() {  
      for(var i = 0; i < imgArray.length; i++) { 
       var tmpImg = new Image; 
       tmpImg.src = imgArray[i]; 
      } 
     } 



     </script>

對不起，這裏的長期話題。我希望你能跟隨！我正在盡我所能學習！

來源

2012-11-22 Franc

呃，PHP和內聯JS不是一個好主意......不知道問題出在哪裏，但嘗試在JavaScript_中附加事件處理程序。 – elclanrs

'不起作用'不會告訴任何人。瀏覽器中的源代碼視圖中顯示了什麼？是否引發錯誤？ – charlietfl

「不起作用」與其獲得的信息一樣沒有說明性。你在瀏覽器中遇到任何錯誤嗎？ –

雖然我不是PHP的專家，你可能意味着

var phpmain_img = "<?php echo urlencode($main_img); ?>";

，而不是

var phpmain_img = <?php echo json_encode($main_img); ?>;

如果你看看呈現的標記，很明顯，圖像變量不包含什麼您預計：

var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"};

，而不是字符串，它是一個對象。

來源

2012-11-22 22:56:41 nrodic

輸出中的引號會將javacsript對象變成'var phpmain_img =「{」0「：」http ......}「;'這更糟，因爲需要在js中解析json也 – charlietfl

我改變了它需要'[0]'元素，請注意'urlencode'。 – nrodic

'[0]'應該可以工作。我的觀點是爲什麼它在定義值的時候還是存在的（我們看不到OP代碼的一部分）。json_encode很可能會轉義，如果不是的話，'striplashes（）'會使它可讀，而不是urlencode – charlietfl

外部Javascript文件未能從頭部的JavaScript塊中接收變量

回答

相關問題