将多个包含JavaScript的HTML页面包含到一个PHP页面中

问题描述：

早些时候，我询问了如何修复下面的时钟和BAM！解决方案几乎是瞬间的。从那时起，我已经成功地将这些时钟中的几个添加到单个PHP页面。一个是东京，一个是伦敦，一个是马德里，另一个是丹佛 - 非常棒。我的问题（现在）是我能够做到这一点的唯一方法是“包括”下面真正由HTML组成的单个PHP页面。如果您在PHP页面上“查看源代码”，则会看到嵌入了多个HTML页面，其中包含打开和关闭HTML，头部和主体标记。将多个包含JavaScript的HTML页面包含到一个PHP页面中

我的问题：是否可以将多个HTML页面嵌入到另一个中？它适用于所有主流浏览器（Google Chrome，Firefox，Internet Explorer，Safari和Opera）。我应该以不同的方式解决这个问题吗？我似乎无法在我的PHP文件的头部调用标题信息并使其正常工作（特别是调用jQuery & scripts/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>

答

你的问题：“是它可以拥有嵌入彼此中的多个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语句调用的，所以我看不到将所有必要的代码（遵循您的建议）放到一个页面上。为什么我不能从这段代码中剥离html标签并将每个时钟存储在自己的页面上？是什么阻止了它的工作，更重要的是，我还能如何去做这件事？ – LyleCrumbstorm 2013-04-20 04:11:22

从头开始！我走开并消化了你的建议。解决方案 - 我把所有的时钟放到一个.js文件中，并根据我的if语句回显必要的div。现在只有1个调用jQuery，1个调用1个.js文件...这很漂亮！谢谢！ – LyleCrumbstorm 2013-04-20 04:30:51

那么，你的php脚本可以回显javascript的部分。因此，当前您将完整的html页面包含/合并到一个页面中，您可以只包含其中的差异（请参阅'\\ timezone 2'），并让它在您的html中回显一个额外的容器div。当然，重构javascript（它只是一些选项和调用）会更好，然后php可以将所需的javascript调用和它们的选项编写（回显）为一条简单的行，也许2会动态创建包含的div。。更好的办法是将数据放在一个带有提供php函数的时区的表格中。 – GitaarLAB 2013-04-20 04:33:38

将多个包含JavaScript的HTML页面包含到一个PHP页面中

相关推荐