Changing url on loading another html file in a div using only javascript

Question

I am trying to load another html file into a div.I successfuly got that. Now I also need my url to change accordingly. how to change the url on loading another html file in a div?? I need this only using 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>

cdoshi · Accepted Answer · 2017-12-07 05:13:06Z

1

Use history.pushState Check https://developer.mozilla.org/en-US/docs/Web/API/History_API for more details

answered Dec 7, 2017 at 5:13

cdoshi

2,8321 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Usha Prasanna Thadepalli · Accepted Answer · 2017-12-07 05:38:37Z

Based on @cdoshi answer we need to do something like below, This will rewrite the url based on the click on the label. But please make note that if we refresh the page the call html file will be obtained.

<!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>

Collectives™ on Stack Overflow

Changing url on loading another html file in a div using only javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related