使用Javascript在HTML中重定向路由_Javascript_Html_Css_Redirect

使用Javascript在HTML中重定向路由

javascript html css redirect

使用Javascript在HTML中重定向路由,javascript,html,css,redirect,Javascript,Html,Css,Redirect,我有3个html文件，我想链接在一起。这三个文件分别是button.html，option1.html，option2.html，所有三个文件都存储在一个src文件夹中按钮.html是一个简单的网页，包含两个按钮： <!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript"

我有3个html文件，我想链接在一起。这三个文件分别是

button.html

，

option1.html

，

option2.html

，所有三个文件都存储在一个src文件夹中

按钮.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>


页面标题
document.getElementById（“option1”）.onclick=function（）{
location.href=“./option1.html”；
};
document.getElementById（“option2”）.onclick=function（）{
location.href=“./option2.html”；
};
选择1
选择2

另外两个.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>


备选案文1/2
//option1.html和option2.html包含的不同数据
选择1或2的标题
备选案文1或2的第款

我不确定我做错了什么，但即使每个按钮都有onClick（）函数，按钮也不会链接到其他HTML文件。我想知道我是否应该在两个HTML文件的标题中添加某种链接标记。另外，我对

location.href

行在

button.html

文件的脚本标记中的作用也不是很确定。我刚刚在网上找到一些资源来尝试一下

另外，我只需要使用Vanila Javascript、HTML和CSS来完成这项工作

请帮帮我。谢谢

如果您预览本地存储中的文件而不是web服务器中的文件，则有一种称为同源策略的策略可能会受到location.href的影响。尝试将其更改为location=“./option.html”等，删除hrer

或者，您可以使一个不可见的标签，设置hrer，然后用JS单击它

var a=document.createElement（“a”）； a、 href=“option1.html”； a、单击（）

把它放在onclick函数中

编辑另一件刚刚实现的事情

脚本标记在html的头部，但按钮在正文中，因此请尝试将脚本标记复制到正文标记的底部，在按钮下面，或者用

window包围两个onclick函数。onload=function{/*other code goes here*/}

UPDATED:我相信这会起作用。请参见，首先，始终在结束正文标记之前添加脚本标记。原因是，如果它寻找的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>


页面标题
选择1
选择2
document.getElementById（“option1”）.onclick=function（）{
location.href=“./option1.html”；
};
document.getElementById（“option2”）.onclick=function（）{
location.href=“./option2.html”；
};

在关闭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>


页面标题
选择1
选择2
document.getElementById（“option1”）.onclick=function（）{
location.href=“./option1.html”；
};
document.getElementById（“option2”）.onclick=function（）{
location.href=“./option2.html”；
};

使用带有

href

的n

标记，而不是

标记，此时不需要任何javascriptall@charlietfl如果他喜欢按钮，不想使用css使其看起来像按钮，那该怎么办window.location.href和location.href在all@bluejayke是啊我才意识到。那么，这可能是因为onclick方法正在与undefined绑定，因为元素在执行之前可能不会被呈现。这其中唯一有意义的部分是最后一部分。这里没有跨源问题，使用

location.href

either@charlietfl哦，又是你。。是的，在这种情况下，你可能会发现你正在想象的问题是不存在的。在文件中的页面之间导航没有问题protocol@charlietfl从未说过它存在，只是说它可能是一个潜在的问题，因为正如文章所提到的，href可以被视为一个xhr请求