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

Question

I have an html page (profileDisplay.html) that loads a profile page depending on which person they click on in the previous page (roster.html).我有一个 html 页面 (profileDisplay.html)，它根据他们在上一页 (roster.html) 中单击的人来加载个人资料页面。 The profileDisplay.html is suppose to do some javascript on page load that decides what values to get from firebase to display for the profile page. profileDisplay.html 假设在页面加载时执行一些 javascript，决定从 firebase 获取哪些值以显示配置文件页面。 The javascript is deciding which profile to get by whatever the user click on in roster.html, but I have no clue how to do that.无论用户在 roster.html 中单击什么，javascript 都会决定要获取哪个配置文件，但我不知道该怎么做。 Here is the code I have now.这是我现在拥有的代码。 I tried to do it by putting a hidden paragraph that has the correct value to pass into the javascript, but I can't do it with the same id for all the different people on the roster.我试图通过将一个具有正确值的隐藏段落传递到 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>

This is the firebase database that the javascript is accessing.这是 javascript 正在访问的 firebase 数据库。

This may be a bad question, but I've been scratching my head about this for 2 days and still can't figure it out, so how would I do this.这可能是一个糟糕的问题，但我已经为此苦恼了 2 天，但仍然无法弄清楚，所以我该怎么做。 My main goal is to have one html page that can load a profile based on what who the user wants it to display.我的主要目标是拥有一个 html 页面，该页面可以根据用户希望显示的内容加载配置文件。

Answer 1

You could pass the values through query string parameters.您可以通过查询字符串参数传递值。

The two following HTML pages show an example.以下两个 HTML 页面显示了一个示例。 Open page1.html and click on the button.打开page1.html并单击按钮。

page1.html code 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 code 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-24 22:08:34

page1.html code page1.html 代码

page2.html code page2.html 代码

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-24 22:08:34

page1.html code page1.html 代码

page2.html code page2.html 代码

解决方案1
1 已采纳 2019-11-24 22:08:34