正確合併2個html頁面的css和javascript代碼

-3

我有2個html頁面。第一個是main.html這是我的主頁。在第二個，我創建了一個textarea它自己的css樣式和javascript函數。我想把這個textarea包含進去main.html。我獨立創建它，因爲它的造型和JS代碼已經太大了，我不想在main.html中造成阻塞。正確合併2個html頁面的css和javascript代碼

main.html            text.html 
<html>             <style> 
<head>              //CSS codes 
    <style>            </style> 
    //some css in there 
    //want to add text.html's css codes in there         
    </style>            <div> 
</head>             <textarea> 
<body>              </textarea> 
    <div>some content in here</div>       </div> 
    <div>some content in here</div>       
    <div>some content in here</div>       <script> 
                  //JS codes      
                 </script> 
    <script> 
    //some javascript goes there 
    //want to add text.html's js codes there 
    </script> 
</body> 
</html>

我知道我可以使用PHP的包括內部main.html像<?php include 'text.html'; ?>功能或者我可以使用。但是對於這兩種解決方案，<style>和<script>標籤都出現在main.html的中間，這是一個醜陋且不需要的場景。這正是我在這裏的主要問題。我想將text.html的CSS代碼放入main.html的<style>標記以及text.html的js代碼中，輸入main.html的<script>標記。有沒有什麼可以做到這一點的魔術？

來源

2017-08-04 Gai Kuroda

請不要在你的問題中使用咒罵。 –

做不是使用<style>和<script>然後把你的CSS/JS之間。

相反，創建新的文件：對index.htmltext.css和text.js爲text.html，和main.css和main.js（你可以選擇什麼來命名這些文件，只要他們在任一js對JavaScript或css對CSS結束）。

然後，您應該將所有JavaScript文件放入名爲js的文件夾中，並將所有CSS文件放入名爲css的文件夾中。同樣，名字並不重要。

你的文件結構現在應該看起來有點像這樣：

|index.php 
|includes 
    |text.html 
|css 
    |main.css 
    |text.css 
|js 
    |main.js 
    |text.js

現在，當你需要的樣式，使用

<link rel="stylesheet" href="css/main.css">

，你本來有

（或css/text.css，當然）您的<style>標籤。

同樣爲JavaScript，使用

<script src="js/main.js"></script>

（或js/text.js包括一個），其中否則你將有你的<script>標籤。

你text.html文件現在不應包含任何腳本或樣式的內容，也沒有鏈接到文件（index.php應該有所有的鏈接）。

所以，現在，只是做

<?php 
    include("includes/text.html"); 
?>

包括HTML內容。

來源

2017-08-04 23:19:52 Toastrackenigma

是的，我想過，但它看起來像阿洛塔工作要做。 –

另一種方法是編寫約50行以上的javascript動態和異步地只包含CSS標籤並將它們注入到main.html的CSS中，然後僅包含Script標籤並將它們注入到' main.html'。你的來電。 –

@GaiKuroda如果您只需按照這些指示逐行進行，最多需要10分鐘左右的時間，一旦完成後，您的網站上的未來頁面將會變得更容易。 – Toastrackenigma

正確合併2個html頁面的css和javascript代碼

回答

相關問題