Tips: HTML/JQuery: Accessing parent functions


I wanted to call parent function from another html file (test1.html) which is viewed inside the index.html. My problem was that  when someone clicks any link in test1.html, they do not open inside index.html but instead were as standalone page, so to over come this issue i added a function test() in test.html which will redirect the output of the licked link inside index.html. The code of both the files is below.

I created a index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta http-equiv=”Content-Language” content=”hi”>
<link href=”css/tags.css” rel=”stylesheet” type=”text/css”>
<link href=”css/styles.css” rel=”stylesheet” type=”text/css”>
<base />
<!– target=’contentFrame’ –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script&gt;

<script>
     $(document).ready(function(){
        loadNewPage(‘test.html’);
     });
  </script>

<script>
    function loadNewPage(temp) {
        $(‘#content’).load(temp);
    }

</script>

</head>
<body style=”background: #880601;”>
    <div id=”test”/>
    <div id=”content”     style=”width: 100%; height: 100%; background: white;”></div>

</body>
</html>

and test1.html

<html>
<head>
<!– target=’contentFrame’ –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script&gt;
<script>
    function test(){
        parent.loadNewPage(“test1.html”);
    }
</script>

</head>
<body>
ttesta
    <a onclick=”test(); return false;” href=””>test1</a>
    <a href=”google.html”>test1</a>
</body>
</html>