Question 185933 in PHP Question posted in
Official manual can be found here.

Php – How to part one long HTML document into several HTML files

I have a long index.html file I want to separate into sections but all the parts in those should function at once when I’m at index.html. Meanwhile I’m trying to add code to have a new window in my index.html. Since the index file is already long, I need the new window code in a separate html.

I tried jquery .load("") method as said in text text but doesn’t seem to work.

<!-- index.html file -->

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
   <script>
      $(function() {
         $("#includeHtml").load("newwindow.html");
      });
   </script>
</head>
<body>
   <h2>This is INDEX PAGE</h2>
   <div id="includeHtml"></div>
</body>
</html>


<!-- newwindow.html file -->

<html>
  <body>
     <h3>This is the NEW WINDOW I want to add to the INDEX</h3>
  </body>
  </html>

Can someone help me to fine tune this method or suggest another method?

Tags:

3

Answers


  1. 0

    As you seem to use php I would suggest to do it server side:

    <!-- index.php file -->

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
   <h2>This is INDEX PAGE</h2>
   <div id="includeHtml">
      <?php include 'newwindow.php' ?>
   </div>
</body>
</html>

    Be aware that you have to rename the index.html to index.php and the newwindow.html to newwindow.php

    Login or Signup to reply.
  2. 0

    If you want to use javascript to load the html you can do it in this way:

    <html>
<body>
   <h2>This is INDEX PAGE</h2>
   <div id="includeHtml"></div>
</body>
</html>

<script>
    window.addEventListener('DOMContentLoaded', async function() {
        try {
            const response = await fetch('html-to-include.html');
            document.getElementById('includeHtml').innerHTML = await response.text();
        } catch (error) {
            console.error('Error:', error);
        }
    });
</script>

    Also on top of what Onki Hara said above, you can also use php to include html files as well, not just php files.

       <div id="includeHtml">
      <?php include 'newwindow.html' ?>
   </div>
    Login or Signup to reply.
  3. 0

    If you want to separate your long index.html file into sections while ensuring that all parts function together when you’re on the index.html page, you can consider using HTML’s <iframe> tag to embed the separate sections as individual HTML files.

    Here’s how you can achieve this:

    Create separate HTML files for each section you want to separate. For example, if you have three sections, create section1.html, section2.html, and section3.html.

    In your index.html file, create <iframe> tags for each section and set the src attribute to the respective section HTML files. For example:

    <iframe src="section1.html"></iframe>
<iframe src="section2.html"></iframe>
<iframe src="section3.html"></iframe>

    This will load and display each section in its own <iframe> on the index.html page.

    To add a new window functionality, you can create a separate HTML file, let’s say newwindow.html, with the desired content for the new window.

    In your index.html file, you can use JavaScript/jQuery to open the newwindow.html file in a new window. Here’s an example using jQuery:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#openNewWindow').click(function() {
      window.open('newwindow.html', '_blank', 'width=500,height=500');
    });
  });
</script>
<button id="openNewWindow">Open New Window</button>

    In this example, a button with the id openNewWindow is created. When the button is clicked, it triggers the JavaScript/jQuery code to open newwindow.html in a new window with a width and height of 500 pixels.

    Make sure that all the necessary HTML, CSS, and JavaScript files are correctly linked and placed in the appropriate locations. Additionally, ensure that you have a compatible version of jQuery included for the code to work properly.

    By separating your sections into individual HTML files and using tags, you can keep your index.html file more organized and load each section independently.

    …or translate into PHP…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search