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

Question

嗨，我是JavaScript的新手。 在周围一些朋友的帮助下，我能够在下面编译此代码。 但是，我无法将它们全部连接在一起。

任务：我想用基于视口的各个文件中的相应php代码替换index.php的<div> 。

泛化函数getAsides()以与多个文件和div一起使用。
访问者更改浏览器大小后，必须重新加载“自动”页面。
整个代码也必须与IE6兼容。 （这是getAsides() ）当前，我的函数getAsides()与IE6兼容。

代码我有：

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

我的问题：

我在正确的轨道上吗？ 有更好的方法吗？ 如果是，那怎么办？
什么是实现“任务”中提到的内容的正确代码/语法

特别说明：

我不会使用jQuery或任何其他JavaScript库，因为这是模板中的唯一JavaScript，并且我不想降低页面速度/性能，因为这是此模板的关键因素。

Answer 1

一个函数可以用数千种不同的方式编写，没有一种正确的编写方法。 您的问题实际上可能是征求意见，辩论或扩展讨论，而不是真正适合stackowerflow的问与答格式。 话虽如此，您的代码仍有一些改进的空间。

考虑使您的跨浏览器XMLHttpRequest检查变得拥塞。 像这样：
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : (XMLHttpRequest && new XMLHttpRequest()) || null;
将您的代码移至外部js文件。 拥有内联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