php文件中的xampp脚本不会延续到html文件[重复]

Posted 2023-02-21

【中文标题】php文件中的xampp脚本不会延续到html文件[重复]

【英文标题】：xampp script from php file doesn't carry over to html file [duplicate]

【发布时间】：2016-02-15 15:02:56

【问题描述】：

我有一个 php 文件，其中包含一个切换可见性的按钮

echo "<button onclick = \"toggle('showDetails')\">expand</button>" ;

echo "<script type=\"text/javascript\">";
echo "   function toggle(id)  \n";
echo "       var e = document.getElementById(id)\n";
echo "       if(e.style.display == 'block')\n";
echo "          e.style.display = 'none';\n";
echo "       else\n";
echo "          e.style.display = 'block';\n";
echo "    ";
echo " </script>";

它在我的 php 页面上运行良好。但是当我转到调用我的 php 页面的 html 页面时，脚本不起作用。我尝试将我的脚本放在 html 页面的标题和 html 页面的正文中，但无济于事。我需要做什么才能让我的按钮在 html 页面上工作。

编辑： 这是 showDetails 元素：

echo "<div id =\"showDetails\" style=\"display:none\">" ;
echo "<strong>client_address:</strong>" ;
echo $client_address;
echo "<br>" ;
echo "<strong>client_date:</strong>" ;
echo $client_date;
echo "</div>" ;

我还打开了我的 html 页面并使用了 google chrome 检查器。当我单击 html 页面上的按钮时，我在控制台中收到错误：

未捕获的 ReferenceError：未定义切换

【问题讨论】：

请将代码添加到您的问题中，在其中回显需要切换的 showDetails 元素。

我已经用 showDetails 元素和控制台错误更新了我的问题。

【参考方案1】：

当您通过ajax 样式的方法（使用XMLHttpRequest）调用此php 文件并在现有页面中注入响应并分配给innerHTML 时，javacscript 嵌入在script标签不会执行。在您的情况下，这意味着永远不会定义 toggle 函数。

有几种方法可以解决这个问题：

在发出此http 请求的HTML 页面中定义toggle 函数。这样，带有此功能的script 标记将从一开始就存在，并在页面加载时执行。 toggle 函数只是坐在那里无所事事，直到您调用将发回按钮的 menu.php 文件，这并不重要。

使用 jQuery 或具有执行此类 http 请求的函数的类似库并执行嵌入的 scripttags 中的任何内容。

使用第二个选项，您可以这样写：

$("#menuDiv").load("menu.php");

还有其他几种方法可以实现，我参考many previous answers这个问题。

另请注意，javascript 中的 else 之前有一个分号，这会破坏您的 if-else 构造：

echo "          e.style.display = 'none';\n";

改为：

echo "          e.style.display = 'none'\n";

【讨论】：

我仍然遇到同样的问题。

当我将您提供的所有代码放在pdf fiddle light 中并修复分号时，按钮按预期工作。但是“调用我的 php 页面的 html 页面”是什么意思？也许我错过了那里的东西，因为html 是由php 制作的。也许您指的是另一个html 页面？

我有一个 html 页面文件。它会调用一个 php 页面，例如 var menu=new XMLHttpRequest(); menu.onreadystatechange=function() if (menu.readyState==4 && menu.status==200) document.getElementById("menuDiv").innerHTML=menu.responseText; menu.open("GET","menu.php",true); menu.send();

嗯，这应该是您从一开始就应该在问题中输入的信息，因为这解释了您的行为。您可以将此代码添加到您的问题中吗？与此同时，我已经更新了我的答案。