php - 在head中,外部Javascript文件无法从 Javascript block 接收变量

  显示原文与译文双语对照的内容
0 0

我在网上搜索了几个小时,在整个"外部js文件"-jungle中找不到答案。 我希望你们能帮助 !

简而言之,我的外部javascript文件似乎没有获得在 main.php 文件中定义的变量。

  1. 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>
    
    
  2. 在我的ext.js 文件中,我想处理这些变量。 在 ext.js 文件中,我定义了一个 function 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];
     }
     }
    
    
  3. 结果:在 main.php 中的swapImage() 。 不工作

    
    <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>
    
    

我们感激任何方式的协助。

更新:

我没有得到特定的错误,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] 仍然无法解决这个问题。 即使我像 below 一样将它硬编码,第二个 javascript block ( 我尝试将它的作为外部js文件进行外包) 也不会得到第一个 javascript block 中定义的变量。


<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>

抱歉,这里的主题很长。 我希望你能跟随 ! 我在尽力学习 !

时间: 原作者:

0 0

虽然我不是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"};

它不是一个字符串而是一个对象。

...