PHP：如何获取当前的 innerHTML？
Posted
技术标签:
【中文标题】PHP：如何获取当前的 innerHTML？【英文标题】：PHP: How to get CURRENT innerHTML? 【发布时间】：2018-03-31 11:42:21 【问题描述】：简单来说，我尝试做一个网站，用户可以在其中制作一个元素，然后把它放在一个id为“box”的div元素中。 js脚本运行良好，可以创建p元素。
然后，我制作了一个 php 脚本，它保存“box” div 的 innerhtml，然后将其保存在 .txt 文件中。
现在，问题是，脚本返回 innerHTML 值作为原始值，在其中添加 p 元素之前。
这是我的 php 脚本：
<?php
//Basically a function
if(isset($_POST["use_button"]))
//Loads the file, which is named test.php
$dom= new DOMDocument();
$dom->loadHTMLfile("test.php");
//Gets the innerhtml value
$div = $dom->getElementById("box")->nodeValue;
//Writes it down in a file.
$file = fopen("stuff.txt","w");
fwrite($file,$div);
fclose($file);
//Just for fast-checking if the code has any errors or not
echo "File saved.";
?>
我想这个问题已经很清楚了。这是如何获取当前值而不是原始值的方法。
如果有帮助，这里是完整的代码：
<html>
<head>
<script>
//The javascript function to add a "para" into a div with the id "box"
function addstuff()
var parag = document.createElement("P"); // Create a <button> element
var t = document.createTextNode("Lorem Ipsum"); // Create a text node
parag.appendChild(t);
document.getElementById("box").appendChild(parag);
</script>
</head>
<body>
<!--Button to call the funtion-->
<button onclick="addstuff()">Add it</button>
<!--The form for the button to work-->
<form action="" method="post">
<!--The div to put the "para"s in. The style only adds borders-->
<div id="box" style="border: 2px solid black;">
<!--A pre-existing paragraph-->
<p>This was here before</p>
</div>
<!--The button to call the php-->
<input type="submit" name="use_button" value="Store in file" style="width:100%;" />
</form>
<!--The PHP-->
<?php
//Basically a function
if(isset($_POST["use_button"]))
//Loads the file, which is named test.php
$dom= new DOMDocument();
$dom->loadHTMLfile("test.php");
//Gets the innerhtml value
$div = $dom->getElementById("box")->nodeValue;
//Writes it down in a file.
$file = fopen("stuff.txt","w");
fwrite($file,$div);
fclose($file);
//Just for fast-checking if the code has any errors or not
echo "File saved.";
?>
</body>
</html>
【问题讨论】：
使用 Jquery 我的朋友，会让你的生活更轻松 What is AJAX and how does it work?的可能重复 因为 PHP 运行在您的服务器上，所以 JS 运行在浏览器中，可能在世界各地的某个地方。它们之间没有直接联系。您通过 HTTP 在它们之间传递数据。在浏览器中修改的 DOM 不会镜像到服务器上。当您编写$dom->loadHTMLfile("test.php"); 时，您正在服务器上加载一些文件，而不是您的用户（在浏览器中）刚刚编辑的 HTML。
【参考方案1】：
这是不可能的：
PHP 生成 HTML，然后将其发送到浏览器。 浏览器在页面中执行javascript。浏览器中没有PHP！并且服务器无法知道用户在浏览器中所做的任何事情！
您可以使用 javascript 进行 AJAX 调用以将数据发送到服务器。
请参考这个答案：https://***.com/a/6009208/1275832
【讨论】：
【参考方案2】：您似乎对<form> 元素的工作方式感到困惑。仅将 HTML 代码添加到表单客户端不会在表单提交时将该 HTML 代码作为表单数据发送到服务器。它也不会自动更新一些 PHP 文件。
您需要将 HTML 代码添加到属于<form> 的一些输入控件（输入、文本区域等）。然后该输入的值将在提交时发送到服务器，此时您可以使用该发送的数据。
因此，在客户端，您可以有一个隐藏的输入来保存要发送的 html。每次需要更改 html 时更新它
HTML
<form action="" method="post">
<input id="boxinput" type="hidden" name="boxinput"/>
<!--- Rest of form -->
</form>
JS
//cache these so you don't need to call getByElementById every call
var box = document.getElementById("box");
var boxinput = document.getElementById('boxinput');
function addstuff()
var parag = document.createElement("P");
var t = document.createTextNode("Lorem Ipsum");
parag.appendChild(t);
box.appendChild(parag);
//update the input field
boxinput.value = box.innerHTML;
然后在服务器端，从 $_POST 全局获取输入数据并根据需要使用它
if(isset($_POST["use_button"]))
$boxHtml = $_POST['boxinput'];
//..
fwrite($file,$boxHtml);
//..
必须注意：如果您打算以某种方式使用这个保存的 html，例如在某个新页面上回显它，您应该在保存/使用它之前对其进行清理。或者只在沙盒框架中显示它（有点像 Stack Overflow 如何将其 Stack Snippets 沙盒化）
【讨论】：
【参考方案3】：这是不可能的。
但是您可以使用 query parameters 手动处理它，在 php 和 javascript 中是相同的
通过query parameters 生成您的页面元素。
例如，当您获得test.php?div=box 时，生成一个包含<div id='box'> 的页面
这样的解决方案太多了
【讨论】：
以上是关于PHP：如何获取当前的 innerHTML？的主要内容，如果未能解决你的问题，请参考以下文章
如何在javascript中插入带有innerHTML的php数组