1

嗨，我对 JavaScript 很陌生。在周围一些朋友的帮助下，我能够在下面编译这段代码。但是我无法将它们全部连接在一起。

任务： 我想根据视口将<div>我的文件替换为index.php相应文件中的相应php代码。

  1. 泛化getAsides()用于多个文件和 div 的函数。

  2. 一旦访问者更改浏览器大小，必须自动重新加载页面。

  3. 整个代码也必须与 IE6 兼容。（这是一个授权）目前我的功能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>

我的问题：

  1. 我在正确的轨道上吗？有没有更好的方法来做到这一点？如果是，那怎么办？
  2. 实现“任务”中提到的正确代码/语法应该是什么

特别说明：

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

4

1 回答 1

0

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

  1. 考虑让您的跨浏览器 XMLHttpRequest 检查拥塞。像这样：

    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : (XMLHttpRequest && new XMLHttpRequest()) || null;

  2. 将您的代码移动到外部 js 文件。拥有内联 JavaScript 从来都不是一个好主意。

于 2013-06-30T21:26:22.207 回答