2

I have some problem with page load on desktop browser and mobile browser. In this case I have 4 html page one is home.html, second is home-mobile.html, third is product.html and fourth is product-mobile.html. My problem is I don't know to switch the html page if opened in mobile browser. For the example is when I open www.example.com in desktop the page will call home.html but when I open www.example.com in mobile the page will call home-mobile.html and so with product page, when I open www.example.com/product in desktop it will call product.html but when I open www.example.com/product in mobile it will call product-mobile.html. The point is how could I open one link and it will detect opened in desktop browser or mobile browser and call different html page.

Which I have been done now but still not working is :

<script>
           window.mobilecheck = function() {
               var check = false;
               if(window.innerWidth<768){
                   check=true;
               }
               return check;
             }
             if(window.mobilecheck()){
                 window.location.href="home-mobile.html";
             }
             else {
                window.location.href="home.html";
             }
</script>

But with that script the URL was changing and not be the same.

Please anyone know how to do this could help me. Thanks.

Omar
  • 32,302
  • 9
  • 69
  • 112
Antonio
  • 755
  • 4
  • 14
  • 35

4 Answers4

1

This script allows you to change the page content without redirecting the browser.

window.mobilecheck = function() {
    var check = false;
    if (window.innerWidth < 768) {
        check = true;
    }
    return check;
}
if (window.mobilecheck()) {
    $.ajax({
        'type': 'POST',
        'url': 'home_mobile.html',
        'data': postData,
        'success': function(response) {
            $("html").html(response);
        }
    });
}

modify the code as you need.

Fadhly Permata
  • 1,686
  • 13
  • 26
  • I got this error `Uncaught ReferenceError: postData is not defined` – Antonio Feb 09 '18 at 07:43
  • Of course, postData is undefined.. I've not declared any data for postData variable. But, As I told on the answer: **modify the code as you need.**, if you do not send any data, then remove that property. – Fadhly Permata Feb 09 '18 at 07:58
  • Could I change `home_mobile.html` with link URL ? – Antonio Feb 09 '18 at 08:14
  • What I mean link URL is routing URL – Antonio Feb 09 '18 at 08:18
  • YES, if the path (or maybe server) is different with the page. – Fadhly Permata Feb 09 '18 at 08:23
  • That ajax was successfull but when the page loaded in mobile all animation not working. For example slider on mobile not working after ajax call the `home-mobile.html`. How to fixed that ? – Antonio Feb 09 '18 at 08:36
  • of course dude, but I think it will be better if you create a new post since I didn't know your whole script. But, I think you need learn JS deeper. – Fadhly Permata Feb 09 '18 at 08:40
  • What cause that case ? Why the animation of slider etc not working ? – Antonio Feb 09 '18 at 08:44
  • dude, how I know whats wrong?? I didn't see your code.. usually JS code initialized when onload. maybe the code does not execute because the onload event has been triggered. Create a new post for your new problem. This case is too far from your first problem. And your first case is solved. – Fadhly Permata Feb 09 '18 at 09:32
  • I already create new post. Please take a look here https://stackoverflow.com/questions/48717100/animation-script-not-working-after-ajax-call?noredirect=1#comment84433586_48717100 – Antonio Feb 10 '18 at 04:22
0

If your device mobile it will automatically redirect on mobile page. Simple use this code. No need for else condition. just check mobile device.

if ($(window).width() < 767) {
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
     "Android"
        if (/windows phone/i.test(userAgent)) {
            return "Windows Phone";
        }

        if (/android/i.test(userAgent)) {
            return "Android";
        }

        if (/iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return "iOS";
        }

        return "unknown";
    }
    if(getMobileOperatingSystem()){
        window.location="\home-mobile.html";
    }

}

HTML Guruz
  • 379
  • 2
  • 8
  • With that script the URL will change to **www.example.com/home-mobile**. What I want is the URL is still still **www.example.com** but the hmtl file load `home-mobile.html` – Antonio Feb 09 '18 at 07:35
  • According to your given code that's means you want redirection on mobile devices. If I see your question you want to load pages without refresh. But HOW? onload? Onclick any link? – HTML Guruz Feb 09 '18 at 07:39
  • Code I given is just my trial and it not give me best answer. Load page is onload. – Antonio Feb 09 '18 at 07:40
0

Let's say your page is home.html. And when the page is loaded, you can run a script to detect client type( desktop or mobile), then send an Ajax call to corresponding page to get the content you want. Then when the Ajax call returned, you can simply replace current content with the returned value.

In this way, your URL will not change at all, and the content can change according to current client type.

home.html:

    <html>
        <head>
            <script language="javascript">
            function loadContent(){
                var clientType
                //your code to get client type here

                //Below block to get Ajax client object according to your browser type
                var XHTTP;
                try
                {
                    //For morden versions Internet Explorer
                    XHTTP = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (ex)
                {
                    try
                    {
                        try
                        {
                            //For old versions Internet Explorer
                            XHTTP=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch(exxx)
                        {
                            XHTTP = new XMLHttpRequest("Msxml2.XMLHTTP");
                        }
                    }
                    catch(exx)
                    {
                        try
                        {
                            //For browsers other than Internet Explorer
                            XHTTP= new XMLHttpRequest();
                        }
                        catch(eexx)
                        {
                            //This means ActiveX is not enabled.
                            //To enabled go to your browser settings and enabled the ActiveX.
                            alert("Not Supported, It might be previous version browser");
                        }
                    }
                }

                if(clientType=="mobile"){
                    XHTTP.open("GET","/home_mobile.html");
                }else{
                    XHTTP.open("GET","/home_desktop.html")
                }

                XHTTP.onreadystatechange= function()
                {
                    if (XHTTP.readyState==4)
                    {
                        var result=XHTTP.responseText.toString();
                        document.getElementById("content").innerHTML=result;
                    }
                }
                //This finlly send the request.
                XHTTP.send(null);

            }
            </script>
        </head>
        <body onload="javascript:{loadContent();}">
            <div id="content"></div>
        </body>
    </html>
Vincent Zhang
  • 369
  • 3
  • 11
  • Could you give me example to do that with html file applied on the AJAX call ? – Antonio Feb 09 '18 at 07:36
  • Do you have experience with Ajax? If yes, you can simply send the request to backend with parameter to identify the client type, and then the server side code return the corresponding html content as string. Then in Client code, the Ajax call back function, you can do the replacement. If you do not have Ajax experience, I suggest you to do some search in web to get the basic usage guides of Ajax. It's simple enough. – Vincent Zhang Feb 09 '18 at 07:42
  • I don't really undestood wiht Ajax because I just designer in this moment. Could you help me with code please ? – Antonio Feb 09 '18 at 07:44
0

This script will change the html content of a current page with requested page html without changing url. (AJAX) 

var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object

        xhr.onload = function() {                       // When response has loaded
          // The following conditional check will not work locally - only on a server
         // if(xhr.status === 200) {                       // If server status was ok
            document.getElementsByTagName("html")[0].innerHTML= xhr.responseText; // Update
          //}
        };

        xhr.open('GET', 'html u want to replace ', true);        // Prepare the request
        xhr.send(null);                                 // Send the request
            });
Vivek Srivatsava
  • 3
  • 4