Fatal编程技术网
  • javascript/
  • javascript在浏览器完成页面呈现之前执行

javascript在浏览器完成页面呈现之前执行

javascript php html

javascript在浏览器完成页面呈现之前执行,javascript,php,html,Javascript,Php,Html,这个问题与之前在这里提出的其他一些PHP&Javascript问题不同，至少我找不到一个 我有一个.php文件，其中包含一些由php呈现的HTML元素，为了便于讨论，这里我们将说该文件位于。它正在寻找某些GET标记，如果存在这些GET标记，则包括一个div <?php if(isset($_GET['VAR'])) { echo '<div id="VARDIV"></div>'; }?> 当页面加载时，如果URL正确，应该在逻辑上弹出div 但事实并

这个问题与之前在这里提出的其他一些PHP&Javascript问题不同，至少我找不到一个

我有一个.php文件，其中包含一些由php呈现的HTML元素，为了便于讨论，这里我们将说该文件位于。它正在寻找某些GET标记，如果存在这些GET标记，则包括一个div

<?php if(isset($_GET['VAR']))
{
   echo '<div id="VARDIV"></div>';
}?>
当页面加载时，如果URL正确，应该在逻辑上弹出div

但事实并非如此。如果我在控制台中再次运行javascript代码，它可以正常工作，因此不会出现拼写错误（例如getElementsById或类似的愚蠢行为）

这怎么可能造成这样的混乱呢？PHP引擎是否应该不呈现HTML，然后在执行一行JS之前将其传回浏览器

为清晰起见，根据以下评论进行编辑：

<script type="text/javascript">
    function doDIVStuff()
    {
       if(document.getElementById("VARDIV")!==null)
       {
        alert('div exists!');
       }
    }
doDIVStuff();
</script>

<html>
   <body>
      <?php if(isset($_GET['VAR']))
      {
      echo '<div id="VARDIV"></div>';
      }?>
   </body>
</html>


函数doDIVStuff（）
{
if（document.getElementById（“VARDIV”）！==null）
{
警报（'div存在！'）；
}
}
doDIVStuff（）；
尝试使用jquery和document ready事件：

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})
如果不想包含jquery js lib，可以使用以下解决方案：

尝试使用jquery和document ready事件：

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})
如果不想包含jquery js lib，可以使用以下解决方案：

用doc rdy（）换行或只需执行以下操作：

<html>
<head>

</head>
<body>
<?php if(isset($_GET['VAR']))
{
  echo '<div id="VARDIV"></div>';
}?>
<script type="text/javascript">
  function doDIVStuff()
  {
    if(document.getElementById("VARDIV")!==null)
    {
      console.log('div exists!');
    }
  }
  doDIVStuff();
</script>
</body>

</html>


函数doDIVStuff（）
{
if（document.getElementById（“VARDIV”）！==null）
{
log（'div存在！'）；
}
}
doDIVStuff（）；
用doc rdy（）换行，或者只需执行以下操作：

<html>
<head>

</head>
<body>
<?php if(isset($_GET['VAR']))
{
  echo '<div id="VARDIV"></div>';
}?>
<script type="text/javascript">
  function doDIVStuff()
  {
    if(document.getElementById("VARDIV")!==null)
    {
      console.log('div exists!');
    }
  }
  doDIVStuff();
</script>
</body>

</html>


函数doDIVStuff（）
{
if（document.getElementById（“VARDIV”）！==null）
{
log（'div存在！'）；
}
}
doDIVStuff（）；
使用window.onload（）或document.onload（），请参阅差异

您也可以将脚本放在html中标记末尾之前，尽管IE中的某些内容可能会产生意外后果，请参见

使用window.onload（）或document.onload（），请参见差异

您也可以将脚本放在html中标记末尾之前，尽管IE中的某些内容可能会产生意外后果，请参见

，实际上，如果您在所有php和html代码都必须运行后将javascript代码放在文件末尾，我已经对其进行了测试

<?php if(isset($_GET['VAR']))
{
   echo '<div id="VARDIV">Dilip</div>';
}?>

<script type="text/javascript">
    if(document.getElementById("VARDIV")!==null)
{
     alert('div exists!');
}
</script>
或者，如果您可以使用jquery，那么它非常棒

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})
事实上，如果你把javascript代码放在所有php和html代码之后的文件末尾，它一定会工作。我已经测试过了

<?php if(isset($_GET['VAR']))
{
   echo '<div id="VARDIV">Dilip</div>';
}?>

<script type="text/javascript">
    if(document.getElementById("VARDIV")!==null)
{
     alert('div exists!');
}
</script>
或者，如果您可以使用jquery，那么它非常棒

$(document).ready(function(){
     if(document.getElementById("VARDIV")!==null)
     {
        alert('div exists!');
     }
})
任何不在函数中的JavaScript都会在解释页面时按顺序执行。你的doDIVStuff（）；调用是在页面上解释任何HTML之前执行的，因此您的“VARDIV”在DOM中尚不可供JS读取

正如其他人所建议的，最好的方法是侦听页面何时完成加载，然后触发对函数的调用。

任何不在函数内的JavaScript都会在解释页面时按顺序执行。你的doDIVStuff（）；调用是在页面上解释任何HTML之前执行的，因此您的“VARDIV”在DOM中尚不可供JS读取

正如其他人所建议的，最好的方法是监听页面何时加载完毕，然后触发对函数的调用。

我认为您应该创建一个javascript文件，并将代码放在那里，以便调试它

我认为您应该创建一个javascript文件并将代码放在那里，这样您就可以调试它了

在浏览器中呈现DOM后，是否要执行此操作？换句话说，您是否在等待文档加载？您的javascript是否位于呈现页面的末尾？您是否在问我javascript是否实际位于php文本文件的末尾？他问您是否正在将DOM相关代码包装到文档就绪处理程序中-。是的。我这样问是因为我试图确定您的浏览器是否已经呈现了DOM。还有@Utkanos所说的。你确定它不是的副本吗？一旦DOM在浏览器中呈现，你会这样做吗？换句话说，您是否在等待文档加载？您的javascript是否位于呈现页面的末尾？您是否在问我javascript是否实际位于php文本文件的末尾？他问您是否正在将DOM相关代码包装到文档就绪处理程序中-。是的。我这样问是因为我试图确定您的浏览器是否已经呈现了DOM。还有@Utkanos所说的。你确定这不是重复的吗？根据他们上面所说的，这似乎很危险。如果您希望按照特定的顺序执行某些事情（就像我所做的那样），即使您重新安排了它，尝试将其包含在特定的顺序中也会变得混乱。根据我的估计，依赖于按给定顺序放置函数才能正常工作的代码对于生产环境来说太危险了。根据他们上面所说的，这似乎很危险。如果您希望按照特定的顺序执行某些事情（就像我所做的那样），即使您重新安排了它，尝试将其包含在特定的顺序中也会变得混乱。根据我的估计，依赖于按给定顺序放置函数才能正确工作的代码对于生产环境来说太危险了。正如上面Irossy的回答一样，我现在完全理解了，但相信依赖于放置顺序才能正确执行的代码只会自找麻烦。完全同意“onload”的概念。非常感谢。解释器在遇到java脚本代码时立即执行它。因此，如果您在创建div之前放置脚本，那么很明显问题就出现了：）正如上面Irossy的回答一样，我现在完全理解了，但相信依赖放置顺序来正确执行的事情只是问而已