正确合并2个html页面的css和javascript代码

i have 2 html pages. first one is main.html which is my homepage. in Second one, i created a textarea with its own css styling and javascript functions. and i want to include this textarea into main.html. İ created it seperately because its styling and JS codes are already too big and i did not want to create a congestion in main.html.

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>

i know that i can use php's include function like <?php include 'text.html'; ?> inside main.html or i can use <iframe>. But with both solutions, <style> and <script> tags appears in the middle of main.html which is an ugly and unwanted scene. Thats exactly whats my main problem in here. i want to put text.html's CSS codes inside main.html's <style> tag as well as text.html's js codes into main.html's <script> tag. Is there anything that will do this magic touch?

donpvtzuux37724
donpvtzuux37724 请不要在你的问题中使用咒骂。
大约 3 年之前 回复

1个回答

Do not use <style> and <script> and then put your CSS / JS between them.

Instead, create new files: text.css and text.js for text.html, and main.css and main.js for index.html (you can choose what to name these files, as long as they end in either js for JavaScript or css for CSS).

You should then put all JavaScript files into a folder named js and all CSS files into a folder named css. Again, the names do not really matter.

Your file structure should now look somewhat like this:

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

Now, when you need the styles, use

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

(or css/text.css, of course) where you would otherwise have had your <style> tags.

Similarly for JavaScript, use

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

(or js/text.js to include that one) where you would otherwise have had your <script> tags.


Your text.html file should now not contain any script or styling content, nor links to the files (index.php should have all of the links).

So now, just do

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

to include the HTML content.

douliao5942
douliao5942 如果您按照这些说明逐行操作,最多需要10分钟左右,一旦完成,您的网站上的页面将更容易实现。
大约 3 年之前 回复
dongsui3297
dongsui3297 另一种方法是动态写入大约50多行javascript,异步只包含CSS标签并将它们注入main.html的CSS中,然后只包含Script标签并将它们注入到main.html的JS中。 你的来电。
大约 3 年之前 回复
dpzzkfb1244
dpzzkfb1244 是的,我想到了,但看起来像alotta工作要做。
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问