Fatal编程技术网
  • javascript/
  • Javascript动态更改另一个页面，这就是我所做的'；我在尽力做可能的事？

Javascript动态更改另一个页面，这就是我所做的'；我在尽力做可能的事？

javascript html dom

Javascript动态更改另一个页面，这就是我所做的'；我在尽力做可能的事？,javascript,html,dom,xhtml,Javascript,Html,Dom,Xhtml,我想知道当用户单击第一个页面的链接时，是否可以更改另一个尚未打开的页面。这很难解释，但我会尝试用下面的一个例子来说明我的意思 对于实际站点而言，html更为复杂，但这里有一个淡化版本： 索引： <head> <script type="text/javascript" src="external.js"></script> </head> <body> <div id="container"> <div cl

我想知道当用户单击第一个页面的链接时，是否可以更改另一个尚未打开的页面。这很难解释，但我会尝试用下面的一个例子来说明我的意思

对于实际站点而言，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>
产品页面：

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


所有产品1信息和图片
所有产品2信息和图片
所以基本上，当点击product1图像时，只在产品页面上显示product1信息，而点击product2时，只在页面上显示product2的信息，是否可以只使用javascript，而不使用php或任何东西。我一直在努力寻找类似的东西，但到目前为止还没有，这让我相信我可能做不到，但我想我会问

我的javascript文档中没有太多内容，因为我还没有弄明白，但我一直在尝试让它们的display=none。如果你知道我的意思的话，我还不能得到一个变量来继续下一页。对不起，我对Javascript只有基本的了解。

您可以更改链接以添加参数。这样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解析URL并仅显示特定产品的数据。

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

看看你需要做什么

您正在寻找的技术是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>
此外，根据单击的链接，我们还取消隐藏已单击产品的产品详细信息，并隐藏未单击产品的详细信息。例如，如果单击产品1，我们将显示产品1：

document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");
最终结果是只显示page2 div。如果用户单击“返回到产品类别”链接，我们将反转过程，隐藏第2页并显示第1页

总之，这种类型的操作可以完全在客户端完成，无需任何PHP或服务器端代码，只需使用@Marcel指出的方法。然而，使用纯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>


函数makeRequest（url）{
如果（window.XMLHttpRequest）{//Mozilla，Safari。。。
httpRequest=新的XMLHttpRequest（）；
}如果（window.ActiveXObject）{//IE
试一试{
httpRequest=新的ActiveXObject（“Msxml2.XMLHTTP”）；
} 
捕获（e）{
试一试{
httpRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
} 
捕获（e）{}
}
}
如果（！httpRequest）{
警报（“放弃：（无法创建XMLHTTP实例”）；
返回false；
}
httpRequest.onreadystatechange=显示内容；
httpRequest.open（'GET'，url）；
httpRequest.send（）；
}
函数displayContents（）{
if（httpRequest.readyState==4）{
if（httpRequest.status==200）{
//警报（httpRequest.responseText）；
document.getElementById（“容器”）.innerHTML=httpRequest.responseText；
}否则{
警报（“请求有问题”）；
}
}
在上面的示例中，当用户单击某个产品的链接时，服务器会以刚好足够的HTML响应，以充分替换页面的div#container部分：

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


产品名称1

产品详细信息
这被注入到页面中，因此DOM将如下所示：

<body>

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

</body>


产品名称1

产品详细信息
摘要：
这个问题被标记为JavaScript，而不是jQuery，因此答案集中在JavaScript上，但许多JavaScript库都使用了DHTML部分中描述的技术。例如，请参阅您描述的技术演示。

DHTML（基本上是HTML、CSS和JS的组合）这不是你在第二段中描述的。我从来都不喜欢这个词，但我猜。对不起，马塞尔，我还在写第二部分。我将对这两部分重新排序，使DHTML排在第一位。感谢链接！：）哇，DHTML和
新的ActiveXObject（“Microsoft.XMLHTTP”）
.T