CODEWITHSUNDEEP
htmliframehref
Shashank Raghunath
Shashank Raghunath

Reputation: 149

iframes and links in multiple webpages

I have a webpage A.html. There are 3 other web pages a1.html a2.html a3.html. a1, a2 and a3 should always open in the iframe inside A.html.

Now there is another webpage B.html which has links to A, a1, a2 and a3. Link for A is not a problem, but how do i put links in B for a1 a2 and a3 so that they open in the iframe inside A?

enter image description here

Upvotes: 0

Views: 2474

Answers (1)

Dangling Cruze
Dangling Cruze

Reputation: 3433

I suppose you want a structure similar to this:

B-----------------------
  A---------------------
     a1-----------------
     a2-----------------
     a3-----------------

Means that B has links to A and A has links to a1, a2 and a3.

If this is the scenario, then just link a1, a2 and a3 to A.html. After than link A.html to the iframe in B.html.

Code could be something like:

B.html

<iframe src="A.html"></iframe>

A.html

<iframe src="a1.html"></iframe>
<iframe src="a2.html"></iframe>
<iframe src="a3.html"></iframe>

And then you could separately have a1, a2 and a3 html files that would have some stuff.

You don't have to put links for a1, a2 and a3 in B.html because you have loaded the file A.html which already has links to those files.

This is the structure you will get by using proper width and heights:

enter image description here

If this is not your scenario, then explain a bit more in your question.

If I understand you correctly, you want the links on B.html to open a1, a2 and a3 in A.html. So for instance, I clicked on a1 which shall open a1 inside A.html.

This can not be done just by plain html because your links are on a separate page. So, somehow you need to tell the other page (in your case A.html) to open default, a1... and so on.

You can do this using plain javascript. In B.html in your links, you need to send the information to A.html about what file to open in the iframe:

<a href="A.html">A</a>
<a href="A.html#a1">a1</a>
<a href="A.html#a2">a2</a>
<a href="A.html#a3">a3</a>

The #a1, #a2... will tell your A.html page to open the requested page in its iframe.

Now you need to read these hash values on A.html. You can do this when body triggers onload event.

<body onload="changeSrc()">
<!-- Load the default page in the iframe, for instance a1.html -->
<iframe id="abc" src="a1.html"></iframe>
<script>
    function changeSrc() {
        var hash = window.location.hash;
        var frame = document.getElementById("abc");

        if(hash == "#a1") {
            frame.src = "a1.html";
        }
        else if(hash == "#a2") {
            frame.src = "a2.html";
        }
        else if(hash == "#a3") {
            frame.src = "a3.html";
        }
        else {
            // default
            frame.src = "a1.html";
        }
    }
</script>
</body>

This will do the task.

So, by using window.location.hash you are actually getting the value that you have passed in the url, say #a1, #a2,... And by checking which page was requested in the if/else condition, you are setting the source of the frame to that particular page.

Hope this is what you want to achieve.

Upvotes: 2

Related Questions