使用 Javascript 在 HTML 中重定向路由答案

【问题标题】：Redirect routes in HTML using Javascript使用 Javascript 在 HTML 中重定向路由
【发布时间】：2020-12-03 22:40:02
【问题描述】：

我有 3 个要链接在一起的 html 文件。这三个文件分别是button.html、option1.html、option2.html，三个文件都存放在一个src文件夹中。

button.html 是一个包含两个按钮的简单网页：

<!DOCTYPE html>
<html>
<head>
      <title>Page Title</title>
      <script type="text/javascript">
        document.getElementById("option1").onclick = function () {
            location.href = "./option1.html";
        };
        document.getElementById("option2").onclick = function () {
            location.href = "./option2.html";
        };
    </script>
</head>
<body>

      <button type="button" id="option1">Option 1</button>
      <button type="button" id="option2">Option 2</button>

</body>
</html>

另外两个 .HTML 文件是常规页面，每个页面都有不同的内容。

<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>

  // different data contained for option1.html and option2.html
  <h1>Heading for Option 1 or 2</h1>
  <p>Paragraph for Option 1 or 2</p>

</body>
</html>

我不确定我做错了什么，但即使每个按钮都有 onClick() 函数，这些按钮也不会链接到其他 HTML 文件。我想知道是否应该在两个 HTML 文件的标题中添加某种链接标记。另外，我不太确定location.href 行在button.html 文件的脚本标记中的作用。我刚刚在网上找到了一些资源来尝试一下。

另外，我只需要使用 Vanila Javascript、HTML 和 CSS 来执行此操作。

请帮帮我。谢谢！！

【问题讨论】：

使用带有href 的n <a> 标签而不是<button>，你根本不需要任何javascript
@charlietfl 如果他喜欢按钮并且不想通过 css 制作按钮的外观

标签： javascript html css redirect

【解决方案1】：

如果您在本地存储而不是 Web 服务器中预览文件，则有一个称为同源策略 https://javascript.info/cross-window-communication#can-t-get-but-can-set 的东西可能会受到 location.href 的影响。尝试将其更改为 location="./option.html" 等，删除 hrer

或者你可以制作一个不可见的a标签，设置hrer，然后用JS点击它

var a=document.createElement("a"); a.href="option1.html"; a.click() ;

并将其放入您的 onclick 函数中，

编辑刚刚意识到的另一件事

脚本标签位于 html 的头部，但按钮位于正文中，因此请尝试将脚本标签复制到正文标签的底部，按钮下方，或用window.onload=function {/*other code goes here*/} 包围两个 onclick 函数

【讨论】：

唯一有意义的部分是最后一部分。这里没有跨源问题，使用location.href也没有错
@charlietfl 哦，又是你……是的，有可能看看链接，伙计
您遇到了在这种情况下不存在的映像问题。在文件协议中页面之间导航没有问题
@charlietfl 从未说过它存在，只是它可能是一个问题，因为文章提到的 href 可以被视为 xhr 请求

【解决方案2】：

更新：我相信这会奏效。首先，请始终在结束正文标记之前添加您的脚本标记。原因是，如果它寻找的 DOM 元素没有被渲染，代码将无法工作。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <button type="button" id="option1">Option 1</button>
  <button type="button" id="option2">Option 2</button>

  <script type="text/javascript">
    document.getElementById("option1").onclick = function() {
      location.href = "./option1.html";
    };
    document.getElementById("option2").onclick = function() {
      location.href = "./option2.html";
    };
  </script>

</body>

</html>

【讨论】：

window.location.href 和 location.href 完全没有区别
@bluejayke 是的！我才意识到这一点。那么它可能正在发生，因为 onclick 方法正在与 undefined 绑定，因为元素可能在它被执行之前还没有被渲染。

【解决方案3】：

你需要在关闭body标签之前添加脚本标签。

<!DOCTYPE html>
<html>
<head>
      <title>Page Title</title>

</head>
<body>

      <button type="button" id="option1">Option 1</button>
      <button type="button" id="option2">Option 2</button>
      <script type="text/javascript">
        document.getElementById("option1").onclick = function () {
            location.href = "./option1.html";
        };
        document.getElementById("option2").onclick = function () {
            location.href = "./option2.html";
        };
    </script>
</body>
</html>

【讨论】：