Javascript动态更改另一个页面，我正在尝试做什么？

时间：2012-05-27 01:13:06

标签： javascript html dom xhtml

我想知道当用户点击第一页的链接时是否可以更改尚未打开的其他页面。这很难解释，但我会试着用下面的例子向你展示我的意思。

html对于实际网站来说更复杂，但这是一个淡化版本：

索引： 

<head>
<script type="text/javascript" src="external.js"></script>
</head>

<body>
<div id="container">
    <div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product.jpg"/> </a>
</div>

<div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product2.jpg"/></a>        
</div>
</body>

产品页面 

<head>
<script type="text/javascript" src="external.js"></script>
</head>


<body>
<div id="container">

<div id = "product1">
  all of product 1 info and pictures
</div>

<div id = "product2">
  all of product 2 info and pictures
</div>

所以基本上，只需使用javascript，没有php或任何东西，当点击product1图像只显示产品页面上的product1信息时，当点击product2时，只显示页面上产品2的信息。我一直试图找到类似的东西，但却没有，这让我相信我可能无法做到，但我想我会问。

我的javascript文档中没有太多内容，因为我无法弄明白，但我一直在玩，试图让他们的display = none。如果你知道我的意思，我无法让变量继续下一页。对不起，我对Javascript只有基本的了解。

3 个答案:

答案 0 :(得分：2)

您正在寻找的技术是DHTML（动态HTML）和AJAX（异步JavaScript和XML）的组合。

的 DHTML：

DHTML背后的想法是，当用户从服务器请求HTML页面时，服务器会响应该页面，以及用户执行某些操作时可能需要的其他数据，例如单击产品形象。

默认情况下，初始页面加载时服务器返回HTML页面的数据通常是隐藏的。例如，页面的DOM已加载，但元素上可能有style =“display：none”。

用户启动某个操作后，该页面会使用JavaScript来操作页面上可见的元素以及可能隐藏的元素。

请考虑以下页面：

<body>
  <div id="page1">
    <div id="container">
        <div class="img">
           <a id="product1" onclick="showProduct1();" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" onclick="showProduct2();" href="#">
           <img src="product.jpg"/> </a>
        </div>
    </div>
  </div>

  <div id="page2" style="display:none">
      <div id="product_page_wrapper">
          <a href="#" onclick="backToCategories()">back to Product Categories</a>
          <div id="productDetails">
              <div id="prod1">
                 ...
                 ...
               </div>
               <div id="prod2">
                 ... 
                 ...
               </div>
          </div
       </div>
  </div>
</body>

上面的页面分为两部分，一部分是id =“page1”，另一部分是id =“page2”。默认情况下，我们隐藏第2页。

当用户点击产品的链接时，我们会隐藏第1页并显示第2页：

document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");

此外，根据点击的链接，我们还取消隐藏所点击产品的产品详细信息，并隐藏未产品的详细信息。例如，如果单击产品1，我们将显示产品1：

document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");

最终结果是只显示page2 div。如果用户单击“返回产品类别”链接，我们将撤消该过程，隐藏page2并显示page1。

总之，正如@Marcel所指出的，这种类型的操作可以在客户端完全完成，无需任何PHP或服务器端代码，只需使用HTML, JavaScript, and CSS。然而，使用纯DHTML更像是一种学术活动而非实际解决方案，因为服务器端维护客户数据，产品数据以及专业的创收产品所需的一切。

的 AJAX：

另一方面，AJAX与DHTML非常相似，甚至可能被认为是DHTML的扩展。 AJAX背后的想法是 - 当用户启动操作时 - 页面从服务器请求数据。当服务器响应时，数据被传递给回调函数，然后使用数据操作页面。

在您的特定示例中，您可以使用DHTML和AJAX的组合来实现所需的效果。请考虑以下页面，该页面使用AJAX为用户选择的产品提取相关的HTML：

<head>
<script type="text/javascript" src="external.js"></script>

<script>

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = displayContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function displayContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        //alert(httpRequest.responseText);
        document.getElementById("container").innerHTML = httpRequest.responseText;
    } else {
      alert('There was a problem with the request.');
    }
  }


</script>
</head>

<body>

    <div id="container">
        <div class="img">
           <a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
           <img src="product2.jpg"/></a>        
        </div>
    </div>
</body>

在上面的示例中，当用户单击产品的链接时，服务器会以足够的HTML响应，以充分替换页面的div＃container部分：

<span id="product">
    <p>Product Name 1</p>
    <p>Product details...</p>
</span>

将其注入页面，以便DOM看起来像这样：

<body>

    <div id="container">
        <span id="product">
            <p>Product Name 1</p>
            <p>Product details...</p>
        </span>
    </div>

</body>

<强>要点：

这个问题是标记的JavaScript，而不是jQuery，因此答案主要集中在JavaScript上，但DHTML部分中描述的技术在许多JavaScript库中都有用。例如，有关您描述的技术的演示，请参阅jQuery Mobile's Multi-Page Template。

答案 1 :(得分：0)

您可以更改链接以添加参数。这样，PRODUCTPAGE.html就知道您点击了哪个链接。

   <a href="PRODUCTPAGE.html?product1"><img src="product1.jpg"/></a>

   <a href="PRODUCTPAGE.html?product2"><img src="product2.jpg"/></a>

在PRODUCTPAGE.html中，您可以使用JavaScript解析网址，并仅显示特定产品的数据。

答案 2 :(得分：0)

是的，您可以通过javascript隐藏和显示DOM的不同部分。

查看this example of a toggle，了解您需要做什么。

相关问题
最新问题