將多個包含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>

來源

2013-04-20 LyleCrumbstorm

你的問題：「是它可以擁有嵌入彼此中的多個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>

我希望這有助於！

來源

2013-04-20 04:03:59 GitaarLAB

我爲訪客提供了選擇他們希望看到的幾個時鐘的選項，因此顯示的時鐘取決於他們的選擇。包含的文件是基於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頁面中

回答

相關問題