更换 <div> 使用基于浏览器视口的javascript（无jQuery）的php内容

Question

Hi I am very new to JavaScript. 嗨，我是JavaScript的新手。 With the help of some friends around I was able to compile this code below. 在周围一些朋友的帮助下，我能够在下面编译此代码。 However I am not able to connect them all together. 但是，我无法将它们全部连接在一起。

Mission: I want to replace the <div> in my index.php with corresponding php code in respective files based on the viewport. 任务：我想用基于视口的各个文件中的相应php代码替换index.php的<div> 。

Generalize the function getAsides() for use with multiple files and divs. 泛化函数getAsides()以与多个文件和div一起使用。
Once visitor changes browser size, Automatically page must be reloaded. 访问者更改浏览器大小后，必须重新加载“自动”页面。
The entire code must be compatible with IE6 too. 整个代码也必须与IE6兼容。 (this is a mandate) Currently my function getAsides() is compatible with IE6. （这是getAsides() ）当前，我的函数getAsides()与IE6兼容。

Code I have: 代码我有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
function getAsides(){
    document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>";
    var x = null;
    if (window.XMLHttpRequest) {
        var x = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        var x = new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } else {
        // @TODO Fallback
    }
    x.open("GET", "other_content_1.php", true);
    x.send("");
    x.onreadystatechange = function() {
        if(x.readyState == 4) {
            if(x.status==200) 
                document.getElementById("aside").innerHTML = x.responseText;
            else 
                document.getElementById("aside").innerHTML = "Error loading document";
        }
    }
} 

function getViewport() {
    var 
    x=window.innerWidth||document.documentElement.clientWidth||document.getElementsByTagName.clientWidth,
    y=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName.clientHeight;

    if (x >=960 && x<=1200) {

    // Here using the function ' function getAsides()' I want to replace
    //'<div id='aside'></div>' with 'aside.php'

    } else if (x >=1201 && x<=1600) {

    // Here using the function ' function getAsides()' I want to replace 
    //'<div id='aside'></div>' with 'aside.php' and
    //'<div id='aside_medium'></div>' with 'aside_medium.php'

    } else if (x >=1600) {

    // Here using the function ' function getAsides()' I want to replace  
    //'<div id='aside'></div>' with 'aside.php' and
    //'<div id='aside_medium'></div>' with 'aside_medium.php' and
    //'<div id='aside_large'></div>' with 'aside_large.php'
    }
}

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', ready, false);
    window.addEventListener('load', ready, false);
} else if(window.attachEvent) {
    window.attachEvent('onload', ready);
}

window.onresize = function() {
    reloadPage(self.innerWidth);
};
</script>
</head>

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="aside"></div>
    <div id="aside_medium"></div>
    <div id="aside_large"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
</body>
</html>

My Questions: 我的问题：

Am I on the right track? 我在正确的轨道上吗？ Is there a better way of doing this? 有更好的方法吗？ If yes then how? 如果是，那怎么办？
What should be the correct code / syntax to achieve what is mentioned in the 'Mission' 什么是实现“任务”中提到的内容的正确代码/语法

Special notes: 特别说明：

I am not going to use jQuery or any other JavaScript libraries because this is the only JavaScript in my template and I do not want to slowdown my page speed / performance as that is the key factor for this template. 我不会使用jQuery或任何其他JavaScript库，因为这是模板中的唯一JavaScript，并且我不想降低页面速度/性能，因为这是此模板的关键因素。

Answer 1

A function can be written in thousand different ways and there is no one correct way to write one. 一个函数可以用数千种不同的方式编写，没有一种正确的编写方法。 Your question might in fact solicit opinion, debate or extended discussion, not really fitting into stackowerflow's Q&A format. 您的问题实际上可能是征求意见，辩论或扩展讨论，而不是真正适合stackowerflow的问与答格式。 That being said, there is some room for improvement to your code. 话虽如此，您的代码仍有一些改进的空间。

Consider congesting your cross-browser XMLHttpRequest check. 考虑使您的跨浏览器XMLHttpRequest检查变得拥塞。 Like so: 像这样：
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : (XMLHttpRequest && new XMLHttpRequest()) || null;
Move your code to an external js file. 将您的代码移至外部js文件。 It's always never a good idea to have inline javascript. 拥有内联JavaScript永远不是一个好主意。

更换 <div> 使用基于浏览器视口的javascript（无jQuery）的php内容

问题描述

1 个解决方案

解决方案1
0 2013-06-30 21:26:22

更换 <div> 使用基于浏览器视口的javascript（无jQuery）的php内容

问题描述

1 个解决方案

解决方案1 0 2013-06-30 21:26:22

解决方案1
0 2013-06-30 21:26:22