仅使用javascript在div中加载另一个html文件时更改url

Question

我正在尝试将另一个html文件加载到div中。 现在，我还需要相应地更改我的网址。 如何在div中加载另一个HTML文件时更改url？ 我只需要使用javascript

 <script type="text/javascript"> function load_tab1() { document.getElementById("content1").innerHTML='<object type="text/html" data="tab1.html" ></object>'; } function load_tab2() { document.getElementById("content2").innerHTML='<object type="text/html" data="tab2.html" ></object>'; } </script>

  <input id="tab1" type="radio" name="tabs" checked > <label for="tab1" onclick="load_tab1()"> <span> <img src="image/idea.svg"> </span>TAB1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2" onclick="load_tab2()"> <span> <img src="image/idea.svg"> </span>TAB2</label> <div class="master_content" id="scroll_bar"> <div class="page_head">Page 1</div> <div class="page"> <section id="content1" id="scroll_bar"> </section> <section id="content2"> </section> <section id="content3"> </section> <section id="content4"> </section> </div> </div>

Answer 1

使用history.pushState检查https://developer.mozilla.org/en-US/docs/Web/API/History_API了解更多详细信息

Answer 2

基于@cdoshi答案，我们需要执行以下操作，这将根据标签上的单击重写URL。 但是请注意，如果我们刷新页面，则会获取调用html文件。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function load_tab1() {
            var stateObj = { foo: "tab1" };
            history.pushState(stateObj, "page 1", "tab1.html");
            document.getElementById("content1").innerHTML='<object type="text/html" data="http://localhost/my_functions/tab1.html" ></object>';
        }
        function load_tab2() {
            var stateObj = { foo: "tab2" };
            history.pushState(stateObj, "page 2", "tab2.html");
            document.getElementById("content2").innerHTML='<object type="text/html" data="http://localhost/my_functions/tab2.html" ></object>';
        }
</script>
</head>
<body>
    <input id="tab1" type="radio" name="tabs" checked >
    <label for="tab1" onclick="load_tab1()">
        <span><img src="image/idea.svg"></span>
        TAB1
    </label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" onclick="load_tab2()">
        <span><img src="image/idea.svg"></span>
        TAB2
    </label>

    <div class="master_content" id="scroll_bar">
        <div class="page_head">Page 1</div>
        <div class="page">
            <section id="content1" id="scroll_bar"></section>
            <section id="content2"></section>    
            <section id="content3"></section>
            <section id="content4"></section>
        </div>
    </div>
</body>
</html>

仅使用javascript在div中加载另一个html文件时更改url

问题描述

2 个解决方案

解决方案1
1 2017-12-07 05:13:06

解决方案2
0 2017-12-07 05:38:37

仅使用javascript在div中加载另一个html文件时更改url

问题描述

2 个解决方案

解决方案1 1 2017-12-07 05:13:06

解决方案2 0 2017-12-07 05:38:37

解决方案1
1 2017-12-07 05:13:06

解决方案2
0 2017-12-07 05:38:37