javascript - 如何将动态变量从一个 html 页面传递到 javascript？-6ren

javascript - 如何将动态变量从一个 html 页面传递到 javascript？

转载作者：行者123 更新时间：2023-12-02 22:27:39

我有一个 html 页面 (profileDisplay.html)，它根据他们在上一页 (roster.html) 中单击的人员来加载个人资料页面。 profileDisplay.html 假设在页面加载时执行一些 JavaScript，决定从 firebase 获取哪些值以显示在个人资料页面上。 javascript 正在决定通过用户在 roster.html 中单击的任何内容来获取哪个配置文件，但我不知道如何做到这一点。这是我现在的代码。我尝试通过将具有正确值的隐藏段落传递到 JavaScript 中来实现此目的，但我无法对名册上的所有不同人员使用相同的 id 来实现此目的。

 // this is roster.html
 
    <h2> Roster </h2>
    <ul>
      <li><a href ="roster\profileDisplay.html"> a guy </a> - <a href = "roles\president.html"> President <p class = "invisible" id = "chosenRoster">showerswithdad</p></a></li>
      <li><a href = "roster\nathan_faynzilberg.html"> another guy </a> - <a href = "roles\vicePresident.html"> Vice President </a></li>
      <li><a href = "roster\profileDisplay.html"> me </a> - General Member <p class = "invisible" id = "chosenRoster">shitsmear</p></li>
    </ul>

document.addEventListener("DOMContentLoaded", event => {

  const app = firebase.app();

  const userDB = firebase.database().ref("users");

  const user = userDB.child(document.getElementById("chosenRoster").innerHTML);

  var realName = user.child('name');


  realName.once("value")
      .then(function(snapshot) {
        document.getElementById("roster_name").innerHTML = snapshot.val();
      })

})

  //this is profileDisplay.html
  
  <script src = "..\javascript\profileDisplay.js"></script>

    <div class = "memberPage">
      <picture>
        <img src="#">
      </picture>
      <h2 class = "noMargin"><p id = "roster_name"></p></h2>
      <ul class = "noMargin">
        <li> Major: WIP </li>
        <li> Minor: WIP </li>
        <li> Grade: WIP </li>
        <li> Expected Graduation Year: WIP </li>
        <li> Position: <a href = "..\roles\president.html"> President </a> </li>
        <li> Brother Name: Showers With Dad </li>
        <li> Class: Zeta </li>
        <li> Big: WIP </li>
        <li> Little(s): WIP </li>
        <li> Fun Fact: Went to boarding school, "<a href = "https://www.stjames.edu/">Saint James</a>", in Maryland. </li>
        <li> Sweetheart: WIP </li>
      </ul>
    </div>

这是 JavaScript 正在访问的 Firebase 数据库。

这可能是一个糟糕的问题，但我已经为此绞尽脑汁两天了，但仍然无法弄清楚，那么我该怎么做呢？我的主要目标是拥有一个 html 页面，可以根据用户希望显示的内容加载配置文件。

最佳答案

您可以通过查询字符串参数传递值。

以下两个 HTML 页面显示了一个示例。打开 page1.html 并单击按钮。

page1.html代码

<!DOCTYPE html>
<html>
  <head>
    <title>Page1</title>
  </head>
  <body>
    <button id="myBtn">Open page 2</button>
    <script>
      var value1 = 'value1';
      var value2 = 'value2';
      var queryString = '?para1=' + value1 + '&para2=' + value2;

      document.getElementById('myBtn').addEventListener('click', function() {
        window.location.href = 'page2.html' + queryString;
      });
    </script>
  </body>
</html>

page2.html代码

<!DOCTYPE html>
<html>
  <head>
    <title>Page2</title>
  </head>
  <body>
    <h4>These are the data from page1.html.</h4>
    <script>
      var queryString = decodeURIComponent(window.location.search);
      queryString = queryString.substring(1);
      var queries = queryString.split('&');
      for (var i = 0; i < queries.length; i++) {
        document.write(queries[i] + '<br>');
      }
    </script>
  </body>
</html>