在一个 PHP 页面中包含多个带有 JavaScript 的 HTML 页面答案

【问题标题】：Include several HTML pages with JavaScript into one PHP page在一个 PHP 页面中包含多个带有 JavaScript 的 HTML 页面
【发布时间】：2013-04-13 12:52:28
【问题描述】：

之前我问过修复下面的时钟和 BAM！解决方案几乎是瞬间完成的。从那以后，我成功地将其中的几个时钟添加到了一个 PHP 页面中。东京一份，伦敦一份，马德里一份，丹佛一份——太棒了。我的问题（现在）是我能够做到这一点的唯一方法是“包含”真正由下面的HTML 组成的各个 PHP 页面。如果您在 PHP 页面上“查看源代码”，您会看到其中嵌入了多个 HTML 页面，其中包含打开和关闭 HTML、head 和 body 标记。

我的问题：可以将多个 HTML 页面相互嵌入吗？它适用于所有主要浏览器（Google Chrome、Firefox、Internet Explorer、Safari 和 Opera）。我应该以不同的方式解决这个问题吗？我似乎无法在我的 PHP 文件头中调用标题信息并使其工作（特别是对 jQuery 和脚本/jclock.js 的调用）。只要它在第一个时钟上加载，就不需要在后面的时钟上加载，但我似乎无法摆脱 HTML，只使用每个时钟的 JavaScript 代码并回显“<div id='us_pacific"></div>”（这就是时钟被打印到正文标签内的 HTML 内的页面上。）

有什么想法吗？

这是时钟：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="scripts/jclock.js"></script>
        <link rel="stylesheet" href="css/homepage.css">
        <script type="text/javascript">
            $(document).ready(
                function() {
                    if ($('#us_pacific .time').length>0){
                       $('#us_pacific .time').remove();
                    }

                    //Set the offset here
                    var offset = -7;
                    if (offset == '')
                        return;
                    $('#us_pacific').append('<div class="time"></div>');
                    var options = {
                        format:'<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc:true,
                        utc_offset: offset
                    }
                    $('#us_pacific .time').jclock(options);
                });
        </script>
    </head>
    <body>
        <div id="us_pacific"></div>
    </body>
</html>

【问题讨论】：

标签： php javascript jquery html include

【解决方案1】：

对于您的问题：'可以将多个 HTML 页面相互嵌入吗？'，答案是：不，您不能在一个文档中包含多个 html 标签，这将是一个无效的文件。

假设jclock.js 编码正确，它应该能够驱动多个实例。

然后您将在 HTML 中添加一些额外的容器 div 并稍微修改您的 JavaScript 代码（查看您拥有的其他版本）以使用自己的选项设置额外的时钟。

您可以将您的代码更改为这个（并根据您的喜好对其进行重构）：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="scripts/jclock.js"></script>
        <link rel="stylesheet" href="css/homepage.css">
        <script type="text/javascript">
            $(document).ready(
                function() {
                    var options; // This way you can re-use it without the 'var' keyword.

                    // Timezone 1
                    if ($('#us_pacific .time').length>0){
                        $('#us_pacific .time').remove();
                    }
                    $('#us_pacific').append('<div class="time"></div>');
                    options = {
                        format: '<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc: true,
                        utc_offset: -7  // Now set the offset here
                    };
                    $('#us_pacific .time').jclock(options);

                    //Timezone 2
                    if ($('#eu .time').length>0){
                        $('#eu .time').remove();
                    }
                    $('#eu').append('<div class="time"></div>');
                    options = {
                        format: '<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc: true,
                        utc_offset: 1  // Now set the offset here
                    };
                    $('#eu .time').jclock(options);
                });
        </script>
    </head>
    <body>
        <div id="us_pacific"></div>
        <div id="eu"></div>
    </body>
</html>

我希望这会有所帮助！

【讨论】：

我为访问者提供了选择他们希望看到的几个时钟的选项，因此显示的时钟取决于他们的选择。包含的文件是根据 if else 语句调用的，因此我看不到将所有必要的代码（按照您的建议）放在一页上。为什么我不能从这段代码中去掉 html 标签并将每个时钟存储在自己的页面上？是什么阻止了它的工作，更重要的是，我还能怎么做呢？
从头开始！我走开了，消化了你的建议。解决方案 - 我将所有时钟放入一个 .js 文件中，并根据我的 if else 语句回显必要的 div。现在只有 1 次调用 jQuery，1 次调用 1 .js 文件……这太美了！谢谢！
好吧，您的 php 脚本可以将部分 javascript 回显到。因此，在您当前将完整的 html 页面包含/合并为一个的地方，您还可以仅包含差异（参见 `\\timezone 2'）并让它在您的 html 中回显一个额外的容器 div。自然，最好重构 javascript（它只是一些选项和一个调用），然后 php 可以将所需的 javascript-calls 及其选项编写（回显）为一个简单的行，也许是 2 以动态创建包含 div 到。 . 最好将数据放在一个表中，其中包含提供 php 函数的时区。
我明白你在说什么，但在我学习的早期阶段，这有点超出我的理解范围。如果我理解正确，您是说我可以避免在 .js 文件中一遍又一遍地重写相同的代码以获得不同的输出，而是在我的 php 中回显差异？（你摇滚！这是我很长一段时间以来周五晚上玩得最开心的一次！）
哈哈，这就是我要说的，但你需要自己看看，我认为最好的方法是向你展示 php 生成的文档（html 和 js ）在浏览器中可能看起来像（右键单击>查看源代码），并让您看到它只是重复的（因此您可能只需要一个包含位置和 utc 偏移量的表）。您甚至可以在客户端生成所有不同的时钟（根据用户偏好）（如果您将其传递给该时区表/数组）。然后你只需要使用 php（以及 mysql 或简单 cookie 之类的存储）来存储用户首选项。