Is there any method of changing page content in a responsive and simple way?-CodePudding

I'm new to web developement and I'm trying to build my first website. This is the main layout...

<!DOCTYPE html>
<html lang="en">

<head>
    <title>MusicApp</title>

    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/util.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div >
        <a id="home"><i ></i>MusicApp</a>
        <div >
            <form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i ></i></button>
            </form>
        </div>
    </div>

    <div  id="sidebar">
        <a id="profile">Profile</a>
        <a id="like">Liked songs</a>
        <a id="genre">Genres</a>
        <a id="about">About</a>
      </div>

    <iframe id="main-frame" name="main-frame" src="/frames/home.htm"></iframe>

    <footer>
        <p><i ></i>Copyright symbol here to make things more interesting.</p>
    </footer>
    <script src="js/main.js"></script>
</body>

</html>

This is the javascript code...

(function ($) {
    "use strict";
    $('.sidebar a').on('click', function () {
        var elm = event.target.id;
        $('.sidebar a').each(function () {
            $(this).removeClass('active');
        })

        $(this).addClass('active');

        if (elm === 'profile') {
            var $iframe = $('#main-frame');
            $iframe.attr('src', '/frames/profile.htm');
        } else if (elm === 'like') {
            var $iframe = $('#main-frame');
            $iframe.attr('src', '/frames/like.htm');
        } else if (elm === 'genre') {
            var $iframe = $('#main-frame');
            $iframe.attr('src', '/frames/genre.htm');
        } else if (elm === 'about') {
            var $iframe = $('#main-frame');
            $iframe.attr('src', '/frames/about.htm');
        } else if (elm === 'home') {
            var $iframe = $('#main-frame');
            $iframe.attr('src', '/frames/home.htm');
        }

    })
})(jQuery);

It looks like this

I'm changing the iFrame source using jQuery on sidebar click to show the new page content inside of it. Is my approach appropriate to the problem or is there any better option of doing this in a simple way?

CodePudding user response：

Disclaimer: This is my subjective opinion

What you have done definitely works and is easy, I don't feel like using an IFrame for this is the proper way to do it.

Of course, at higher complexity this could be handled by a javascript framework like vue and react, but it can be done much simpler:

function loadPage(page) {
    let req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("content").innerHTML = req.responseText;
        }
    };
    req.open("GET", page, true);
    req.send();
}

<button onclick="loadPage('other.html')">Other page</button>

Clicking on the button now inserts the content of other.html into your div.

CodePudding user response：

Using iframes as you've proposed is how web development was previously done in the early 2000s, but we have better tools now.

Being that I'm a fan of vanilla JS, I'd recommend using something like fetch to get your HTML stored in separate files.

fetch("https://www.your-domain.com/path/your-file.html")
.then(function (response) {
    // gets the data
    return response.text();
})
.then(function (data) {
    // do stuff with your data here

    // create a temp storage element
    const div = document.createElement("div");
    
    // deserialize and add the returned HTML to the temp storage element
    div.innerHTML = data;
    
    // add the contents of the first element (article in my case) to the document fragment
    fragment.appendChild(div.querySelector("article"));
})
.catch((error) => {
    console.error("Error:", error);
});

// append the document fragment containing the HTML to the element of your choosing (body in my case)
document.querySelector("body").appendChild(fragment)

There are tons of third-party tools that will do similar things, but I think it's better to know how to do it yourself.

I'd recommend wrapping the whole thing in a function inside of a javascript module.