Showing an object within the same page upon clicking a hyperlink

Question

Showing an object within the same page upon clicking a hyperlink

I am currently developing a web page using only HTML5 and minimal Javascript.

My goal is to have a menu displayed near the page text, allowing users to click on links that will show the contents of other HTML pages. Something like this:

https://i.sstatic.net/ravwC.png

After researching frames and iframes, I've decided to opt for using Objects instead.

Here's what I have in mind:

<center>
<right>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</right>
<left>
<object data="text.html" type="text/html"></object>
</left>
</center>

Can anyone provide guidance on how to effectively display and change the contents from another HTML file within the same page by clicking on a menu link?

javascript jquery css html

Answer 1

Answer №1

Here is my approach to achieving this:

<top>
  <ul id="menu">
    <li><a href="page1.html">Menu Item 1</a></li>
    <li><a href="page2.html">Menu Item 2</a></li>
    <li><a href="page3.html">Menu Item 3</a></li>
  </ul>
</top>
<bottom>
  <div id="main-content"></div>
</bottom>

$(function() {
   $("#menu > li > a").on("click",function(e) {
     e.preventDefault(); // prevent the default link behavior
     $("#main-content").load(this.href); // load content from the same origin as the script
   });
});

LATEST UPDATE
Considering that some browsers restrict ajax calls on local pages, another simple alternative is to use an iframe for your locally stored pages - this solution ensures compatibility across all browsers with no additional scripts required:

<top>
  <ul id="menu">
    <li><a href="page1.html" target="_iframe1">Menu Item 1</a></li>
    <li><a href="page2.html" target="_iframe1">Menu Item 2</a></li>
    <li><a href="page3.html" target="_iframe1">Menu Item 3</a></li>
  </ul>
</top>
<bottom>
  <iframe name="_iframe1"></iframe>
</bottom>

Answer 2

Here is my approach to achieving this:

<top>
  <ul id="menu">
    <li><a href="page1.html">Menu Item 1</a></li>
    <li><a href="page2.html">Menu Item 2</a></li>
    <li><a href="page3.html">Menu Item 3</a></li>
  </ul>
</top>
<bottom>
  <div id="main-content"></div>
</bottom>

$(function() {
   $("#menu > li > a").on("click",function(e) {
     e.preventDefault(); // prevent the default link behavior
     $("#main-content").load(this.href); // load content from the same origin as the script
   });
});

LATEST UPDATE
Considering that some browsers restrict ajax calls on local pages, another simple alternative is to use an iframe for your locally stored pages - this solution ensures compatibility across all browsers with no additional scripts required:

<top>
  <ul id="menu">
    <li><a href="page1.html" target="_iframe1">Menu Item 1</a></li>
    <li><a href="page2.html" target="_iframe1">Menu Item 2</a></li>
    <li><a href="page3.html" target="_iframe1">Menu Item 3</a></li>
  </ul>
</top>
<bottom>
  <iframe name="_iframe1"></iframe>
</bottom>

Answer 3

Answer №2

<script src="https://ajax.googleapis.com/ajax/libs/angular/1.3.8/angular.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo</title>
<script language="TypeScript">
function changeContent()
{
    var element = document.getElementById("maincontent");
    if (element != null)
    {
    element.setAttribute('data', 'http://example.com/');
    alert('Content has been updated');
    }
}
</script>
</head>
<body>
<form name="Form2" method="POST">
<p><input type="button" value="Click to update content" onclick="changeContent();" /></p>
<object style="visibility: visible; border: none;" standby="loading data" id="maincontent" title="updating" width="100%" height="60%" type="text/html" data="http://example.com/"></object>
</form>
</body>
</html>

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/angular/1.3.8/angular.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo</title>
<script language="TypeScript">
function changeContent()
{
    var element = document.getElementById("maincontent");
    if (element != null)
    {
    element.setAttribute('data', 'http://example.com/');
    alert('Content has been updated');
    }
}
</script>
</head>
<body>
<form name="Form2" method="POST">
<p><input type="button" value="Click to update content" onclick="changeContent();" /></p>
<object style="visibility: visible; border: none;" standby="loading data" id="maincontent" title="updating" width="100%" height="60%" type="text/html" data="http://example.com/"></object>
</form>
</body>
</html>

Answer 5

Answer №3

You have the option to add an onclick action to each of the links.

For example, based on your provided code: $("object").attr("data","text2.html");

Here is a possible implementation:

 <center>
    <right>
    <li onclick="$('object').attr('data','text1.html')">link 1</li>
    <li onclick="$('object').attr('data','text2.html')">link 2</li>
    <li onclick="$('object').attr('data','text3.html')">link 3</li>
    </right>
    <left>
    <object data="text1.html" type="text/html"></object>
    </left>
    </center>

Note that there is no 'head' tag included in this code snippet. JQuery must be utilized for this functionality to work.

This setup functions perfectly fine: http://jsfiddle.net/rws8pa8z/

Answer 6

You have the option to add an onclick action to each of the links.

For example, based on your provided code: $("object").attr("data","text2.html");

Here is a possible implementation:

 <center>
    <right>
    <li onclick="$('object').attr('data','text1.html')">link 1</li>
    <li onclick="$('object').attr('data','text2.html')">link 2</li>
    <li onclick="$('object').attr('data','text3.html')">link 3</li>
    </right>
    <left>
    <object data="text1.html" type="text/html"></object>
    </left>
    </center>

Note that there is no 'head' tag included in this code snippet. JQuery must be utilized for this functionality to work.

This setup functions perfectly fine: http://jsfiddle.net/rws8pa8z/

Showing an object within the same page upon clicking a hyperlink

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason behind this being deemed as true?

What is the correct way to insert a new key-value pair into an object within the state of functional components?

Combining objects while utilizing SetState within a loop: a guide

Unable to complete 'drawImage' operation in react-image-crop

Prevent Parent Handler invocation in JavaScript

The information in the Vue data is not showing up on the webpage

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

AngularJS Filter from "start to finish" in values

What is the best way to arrange this object alphabetically by name using Angular?

using a ternary operator within the map function

The issue of the back button not functioning in the React Multi-level push menu SCSS has

Upload files using jQuery along with additional data included

Learn how to retrieve data by clicking on the previous and next buttons in FullCalendar using Vue.js

The error message thrown in Node.js: "Cannot access 'filename' property of undefined object"

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Using the video-js feature to play multiple videos simultaneously

Having trouble with npm and unable to find a solution that works. Any suggestions on how to fix it?

Do you think my plan to develop an HTML parser from the ground up will be successful?

Arrow functions do not function properly with Typescript decorators

What is the reason for Javascript XMLHttpRequest returning the octet-stream MIME type response as a string instead of binary