时间戳

首页 > 解决方案 > 如何将动态变量从一个html页面传递给javascript？

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

问题描述

我有一个 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 数据库。 Firebase 数据库

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

标签： javascripthtmlfirebase

解决方案

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

以下两个 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>

推荐阅读