Question

我在桌面浏览器和移动浏览器上的页面加载方面遇到了一些问题。在这种情况下，我有 4 html页面一个是home.html，第二个是home-mobile.html，第三个是product.html，第四个是product-mobile.html。我的问题是如果在移动浏览器中打开，我不知道要切换html页面。例如，当我在桌面打开 www.example.com 时，该页面会调用home.html但是当我在移动页面中打开 www.example.com 时将在产品页面中调用home-mobile.html等，当我在桌面打开 www.example.com/product 时，它会调用product.html但是当我打开 www.example时.com / product 在移动设备中，它会调用product-mobile.html。关键是我如何打开一个链接，它将检测在桌面浏览器或移动浏览器中打开并调用不同的html页面。

我现在已经完成但仍然无法正常工作：

<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>

但是使用该脚本，URL正在发生变化而不是相同。

请任何人知道如何做到这一点可以帮助我。感谢。

Answer 1

如果您的设备是移动设备，它将自动在移动设备页面上重定向。简单地使用此代码。不需要其他条件。只需查看移动设备。

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";
    }

}

Answer 2

假设您的网页是home.html。加载页面时，您可以运行脚本来检测客户端类型（桌面或移动设备），然后将Ajax调用发送到相应的页面以获取所需的内容。然后，当返回Ajax调用时，您只需使用返回的值替换当前内容。

通过这种方式，您的网址根本不会发生变化，内容可以根据当前的客户端类型进行更改。

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>

Answer 3

此脚本允许您更改页面内容，而无需重定向浏览器。

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);
        }
    });
}

根据需要修改代码。

Answer 4

此脚本将更改当前页面的html内容，其中包含请求的页面html而不更改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
            });

加载另一个html页面而不更改URL

4 个答案: