Fatal编程技术网
  • javascript/
  • Javascript 在不更改URL的情况下加载另一个html页面

Javascript 在不更改URL的情况下加载另一个html页面

javascript jquery html mobile

Javascript 在不更改URL的情况下加载另一个html页面,javascript,jquery,html,mobile,Javascript,Jquery,Html,Mobile,我在桌面浏览器和移动浏览器上的页面加载有问题。在本例中，我有4个html页面，一个是home.html，第二个是home mobile.html，第三个是product.html，第四个是product mobile.html。我的问题是，如果在mobile浏览器中打开，我不知道如何切换html页面。例如，当我在桌面上打开www.example.com时，页面将调用home.html，但当我在手机上打开www.example.com时，页面将调用home mobile.html，产品页面也是如此

我在桌面浏览器和移动浏览器上的页面加载有问题。在本例中，我有4个html页面，一个是
home.html
，第二个是
home mobile.html
，第三个是
product.html
，第四个是
product mobile.html
。我的问题是，如果在mobile浏览器中打开，我不知道如何切换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>


window.mobilecheck=函数（）{
var检查=假；

如果（window.innerWidth如果您的设备移动，它将在移动页面上自动重定向。只需使用此代码即可。不需要其他条件。只需检查移动设备即可


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



if（$（窗口）.width（）<767）{
函数getMobileOperatingSystem（）{
var userAgent=navigator.userAgent | | navigator.vendor | | window.opera；
“安卓”
if（/windows phone/i.test（userAgent））{
返回“Windows Phone”；
}
if（/android/i.test（userAgent））{
返回“Android”；
}
如果（/iPhone | iPod/.test（userAgent）和&！window.MSStream）{
返回“iOS”；
}
返回“未知”；
}
if（getMobileOperatingSystem（））{
window.location=“\home mobile.html”；
}



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

这样，您的URL将不会发生任何更改，并且内容可以根据当前客户端类型进行更改

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>




函数loadContent（）{
变量clientType
//您的代码可以在此处获取客户端类型
//下面的块根据浏览器类型获取Ajax客户端对象
var-XHTTP；
尝试
{
//对于现代版本的Internet Explorer
XHTTP=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}
捕获（ex）
{
尝试
{
尝试
{
//对于旧版本的Internet Explorer
XHTTP=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
捕获（exxx）
{
XHTTP=newxmlhttprequest（“Msxml2.XMLHTTP”）；
}
}
捕获（exx）
{
尝试
{
//对于Internet Explorer以外的浏览器
XHTTP=newXMLHttpRequest（）；
}
渔获物（eexx）
{
//这意味着未启用ActiveX。
//要启用，请转到浏览器设置并启用ActiveX。
警报（“不支持，可能是以前版本的浏览器”）；
}
}
}
如果（客户端类型==“移动”）{
XHTTP.open（“GET”，“/home\u mobile.html”）；
}否则{
XHTTP.open（“GET”，“/home\u desktop.html”）
}
XHTTP.onreadystatechange=函数（）
{
if（XHTTP.readyState==4）
{
var result=XHTTP.responseText.toString（）；
document.getElementById（“内容”）.innerHTML=结果；
}
}
//这将最终发送请求。
XHTTP.send（空）；
}

此脚本允许您在不重定向浏览器的情况下更改页面内容


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



window.mobilecheck=function（）{
var检查=假；
如果（窗内宽度<768）{
检查=正确；
}
退货检查；
}
if（window.mobilecheck（））{
$.ajax({
'type'：'POST'，
“url”：“home_mobile.html”，
“数据”：postData，
“成功”：函数（响应）{
$（“html”）.html（回复）；
}
});
}



根据需要修改代码。
此脚本将使用请求的页面html更改当前页面的html内容，而不更改url。（AJAX）


那么，为什么不使用AJAX来替换整个文档呢？@FadhlyPermata使用AJAX来替换是什么意思？你能给我举个例子吗？@deblocker在我的情况下与此不一样。好的，抱歉。请看这里：@Antonio看到我的答案。使用该脚本，URL将更改为www.example.com/home-mobile。我想要的是URL仍然是www.example.com但是hmtl文件load
home mobile.html
根据您给定的代码，这意味着您希望在移动设备上重定向。如果我看到您的问题，您希望在不刷新的情况下加载页面。但是如何加载？onload？Onclick任意链接？我给出的代码只是我的试用版，并没有给出最佳答案。加载页面是onload。您能给我一个例子吗ampl

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