HTML - 从另一个HTML页面运行Javascript？

Question

I am working on my website, but I have a big issue with the menu. Some HTML files include more pages, so I would like all pages directly accessible from the menu.

Please have a look at the following website: http://tuinhierhamont.be/beta/index.html

When you want to enter an INFO page, you can select it from the menu, but it will be only visible if you are already on the info page. This means that you have to select the page twice.

Please let me know how I can prevent this.

Javascript:

<script>
function show(shown, hidden, hidden2) {
window.location = 'info/index.html';
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
document.getElementById(hidden2).style.display='none';
return false;
}
</script>

html menu

<div id="menu">
    <ul id="nav">
            <a href="index.html">
                <div id="menuitem">Home</div>                   
            </a>
            <li><a href="#">
                <div id="menuitem">Info</div>                    
            </a>
                        <ul>                
                                <li><a href="info/index.html" onclick="return show('Page1','Page2','Page3');">Doelstelling</a></li>
                                <li><a href="info/index.html" onclick="return show('Page2','Page1','Page3');">Bestuur</a></li>
                                <li><a href="info/index.html" onclick="return show('Page3','Page1','Page2');">Lid worden</a></li>
                        </ul>
                </li>
            <a href="activiteiten/index.html">
                <div id="menuitem">Activiteiten</div>                   
            </a>
            <a href="fotos/index.html">
                <div id="menuitem">Foto's</div>                  
            </a>
            <a href="links/index.html">
                <div id="menuitem">Links</div>                   
            </a>
            <a href="tehuur/index.html">
                <div id="menuitem">Te huur</div>
            </a>
    </ul>
</div>

html on INFO page

<div id="Page1" style="display:none">


text

</div></br>

<div id="Page2" style="display:none">


text


   </p>

</div></br>
<div id="Page3" style="display:none">

text

</div></br>

Please have a look at the website link to see what I mean, try to open an INFO-page twice.

Answer 1

I would also suggest to solve this problem with URL parameter:

http://tuinhierhamont.be/beta/info/index.html?page=info&external=true

And then you can check the url parameter when the page is loading. Depending on the parameter value you can show and hide the content. Code for reading the url parameter could be something like:

function getParam(variable){  
  var query = window.location.search.substring(1);   
  var parameter = query.split("&");  
  for (var i=0; i< parameter.length; i++) {    
        var pair = parameter[i].split("=");   
        if(pair[0] == variable){
          return pair[1];
        }
   }     
}
var external = getParam('external');
var page = getParam('page');