Is there any way to use the URL to specify an Iframe target in HTML5?

Question

I am working on a personal site, and the site uses an <iframe> to display most of its contents. You navigate the site by changing the target of the <iframe> to a specific .html.

Here's an example of how the navigation works:

<ul>
    <li><a>onclick="document.getElementById('iframe1').src='home.html'>Home</a></li>
    <li><a>onclick="document.getElementById('iframe1').src='prjcts.html'>Projects</a></li>
 </ul>

 <iframe src="home.html" id="iframe1"></iframe>

The problem that I've encountered is that since most things are is inside of the <iframe> that I can't link directly to any specific content.

If I wanted to show someone the Projects page, I can only link "www.example.com/" and tell them to navigate there themselves, and not simply link "www.example.com/projects".

My theory is that you can do it with something like:
"www.example.com#projects" using ID's or something, but since I'm pretty new to HTML5, I might be completely wrong. I have no idea how to make it work, and I can't seem to find anyone explaining it.

Is there any way to use the URL to specify an <iframe> target, and if so, how?

This is an obscure way to design and develop a website, is there a particular reason for using this iframe technique? If you are set on this idea only then couldn't you link someone to the `www.example.com/projects` page, and have your javascript check the url, if it is not null after the `/` then load that specific iframe in the page. — MannfromReno, Jan 16 '15 at 21:19
@MannfromReno I chose the Iframe technique due to two reasons: one was to save on bandwidth since my background image is rather large, and secondly is because I got the impression by webdesign teacher to use it. As I said, I'm fairly new to this, and thanks for the advice. How would I go about using Javascript to check the URL and redirect the user? — xprs, Jan 17 '15 at 00:38

score 0 · Answer 1 · edited May 23 '17 at 12:27

You would want to check the url and then set the src of your iframe using the url: This is just an example of how you could do it, you should use maybe an array of URLs. There are a bunch of ways to accomplish this.

HTML:

<div id="wrapper">
    <iframe id="myIframe" src="http://example.com/"></iframe>
</div>

JavaScript (using jQuery here):

$(document).ready(function () {
    var myPath = window.location.pathname; // returns something like /projects.html
    if (myPath == "/projects.html") {
        $('#myIframe').src = "http://www.example.com/projects.html"; // sets the src of your iframe
    }
});

Refer to this post's answer: dynamically set iframe src

Is there any way to use the URL to specify an Iframe target in HTML5?

1 Answers1