正确合并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代码

回答

相关问题