将 html 移动到 php 后发生的变化包括

Posted 2023-04-14

【中文标题】将 html 移动到 php 后发生的变化包括

【英文标题】：Things changed after moving html to php include

【发布时间】：2015-12-20 01:16:44

【问题描述】：

以下 html 最初是在 javascript 函数中生成的，但我认为最好将其放在 php 包含中：

<div id="formcontainer">
<h1>Login</h1>
<form method="post" action="index.php">
<p><input type="text" name="login" value="" placeholder="Email"></p>
<p><input type="password" name="password" value=""placeholder="Password"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>

原来的javascript函数仍然存在，但现在它唯一的作用是定位“formcontainer”：

function setuploginzone() 
   var head = document.getElementById("superheader");
   var foot = document.getElementById("superfooter");
   var headheight = head.clientHeight;
   var footheight = foot.clientHeight;
   var contp = document.getElementById("containerparent");
   var contptop = headheight;

   contp.style.top = contptop;

   var h = contp.clientHeight; //get height of containerparent
   var vertcenter = h/2;
   var logform = document.getElementById("formcontainer");
   var logformheight = logform.clientHeight;
   var logformtop = vertcenter - (logformheight);

   logform.style.position = "relative";
   logform.style.top = logformtop;

最初它都是在 index.php 末尾调用的 javascript 中，并将 html 插入一个名为“containerparent”的 div 中。 当它全部在 javascript 中时，这一切都工作得很好，但现在我在 php 中创建了“formcontainer”，包括标题不显示并且 div 没有按照 javascript 函数定位。

有什么想法吗？

【问题讨论】：

欢迎来到 Stack Overflow。由于 JS 在客户端执行，我看不出将 HTML 移动到包含文件的位置会影响什么。当您查看生成的 Source 时，是否有您期望的所有内容？

我也认为问题在于 php 包含没有按预期工作，而不是 javascript

【参考方案1】：

这可能是由于执行 javascript 和加载 DOM (id:formcontainer) 中的元素之间的时间。如果 JS 函数首先运行，那么它将计算您的一个或所有高度方程为 0，并且该函数将无法按预期工作。检查是否是这种情况的简单方法是 console.log() 你的一些变量，或者使用 setTimeout 来喜欢 10000 或其他东西。

编辑，抱歉，如果您的变量的 console.log 返回 0，这可能表明上述指定问题，请务必清楚。希望这可以帮助。 :)

【参考方案2】：

我认为您的问题全在于 CSS。为避免您的设计出现任何奇怪的变化，请尝试使用Bootstrap css 和 javascript。它将为您提供您想要的最佳设计。 它有两种不同类型的容器：

<div class="container">

</div>
<div class="container-fluid">

</div>

每一个的使用取决于你想要的位置和设计。 它易于学习且非常有用。

希望对你有帮助