opening links within an iframe

Forum Moderators: phranque

Message Too Old, No Replies

opening links within an iframe

Dan99

11:46 pm on Oct 23, 2022 (gmt 0)

I have a main web page that contains an iframe (as in, a box with containing a subsidiary html file). Inside the iframe subsidiary html, there are links. But if you try to click on those link in the iframe, they don't open. You need (I usually use Firefox) to "Open Link in New Tab" to see them. If you click on links in the main web page that aren't in the iframe, they open just fine. How can I set it up so links in an iframe will open directly?

phranque

12:29 am on Oct 24, 2022 (gmt 0)

is the iframe content served from the same domain as the main web page?

do you intend to open the link within the iframe or in the parent?
(i.e., is the target attribute specified?)

are any X-Frame-Options HTTP Response headers sent with the document?

Dan99

1:10 am on Oct 24, 2022 (gmt 0)

Yes the content is served from the same domain as my main web page. Doesn't matter how it opens. I just want that when people click it, it opens. They do that because they want to see it. Not sure what an X-Frame-Options HTTP Response headers is, but I sure never put any in intentionally.

phranque

3:50 am on Oct 24, 2022 (gmt 0)

is the target attribute specified for the link anchor elements in the iframed document?

Dan99

10:30 pm on Oct 24, 2022 (gmt 0)

Sorry, I'm not sure what that means. What is "target attribute", and what is the "link anchor element"? The iframed document is a web page. The iframe points to that web page.
<iframe src="archivelist.htm" width="100%" height="400"></iframe>

phranque

10:55 pm on Oct 24, 2022 (gmt 0)

the anchor element is how you link to urls in your html document:
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

the target attribute is how you specify the browsing context to be used by the browser when the hyperlink is clicked:
https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-target

for example, you might have something like this within archivelist.htm:

<a href="archive1.htm" target="_self">open this archive within the iframe</a>

lexipixel

5:12 am on Oct 25, 2022 (gmt 0)

have a main web page that contains an iframe (as in, a box with containing a subsidiary html file). Inside the iframe subsidiary html, there are links.

If it's dynamic content you want to include, maybe try a Server Side Include instead of IFRAME.

[httpd.apache.org ]

SSI would technically pull the content of the "included file" into same page and links would behave as normal, (no need for target attributes or browser security or behavior issues found with using IFRAME).

The included file could be as simple as ---


<a href="example.com/pg1">Link 1</a><br>
<a href="example.com/pg2">Link 2</a><br>
<a href="example.com/pg3">Link 3</a><br>

*** Don't put any <HTML>, <HEAD>, <TITLE>, or even <BODY> tags in the included file ***.

,,bonus is all your CSS, javascript, etc from "parent page" will be available to use in the included content -- easy to blend into page.
.
.

Dan99

1:44 am on Oct 26, 2022 (gmt 0)

Well, this makes no sense to me. When I open the main web page locally, with the iframe (subsidiary file) also local, the links in the subsidiary file open properly within the iframe. But when they're both uploaded to my domain, the links in the subsidiary file refuse to open within the iframe. Whyever might this be?

phranque

4:16 am on Oct 26, 2022 (gmt 0)

still unanswered:

is the target attribute specified for the link anchor elements in the iframed document?

Dan99

12:46 pm on Oct 26, 2022 (gmt 0)

I now have
<a href="archive1.htm" target="_self">
in the iframed document. Doesn't seem to make any difference.
Now, archive1 IS the iframed document.
I'm still puzzled why the web pages behave different locally than online. Same web pages in both cases.

not2easy

1:04 pm on Oct 26, 2022 (gmt 0)

Are all your files in the same directory? Are your "don't work" links internal links? Have you tried using a different browser or checked your browser settings?

Dan99

2:16 pm on Oct 26, 2022 (gmt 0)

Does the same thing in Chrome and Firefox. Won't directly open links within an iframe when online. Need to open them in a new tab. Opens easily within the iframe when everyone is local. Both locally and online they are in the same directory.

not2easy

3:20 pm on Oct 26, 2022 (gmt 0)

Maybe try snipping out the width code:

width="100%"

only because it produces an error. It is a good idea to validate the entire page when things aren't working as expected. The width code may not be the cause but it does produce an error using the w3c validator: [validator.w3.org...]

lexipixel

6:12 pm on Oct 26, 2022 (gmt 0)

If you want the document (the clicked link) from an IFRAME to open in and overtake the same tab or window as the parent of the IFRAME use target="_parent" not _self.

If you are still confused, try each of these targets to see if there's a difference --

_self

_blank

_parent

_top

Dan99

7:45 pm on Oct 26, 2022 (gmt 0)

Well, sigh, let me repeat. The problem is NOT opening a link inside an iframe in the frame itself, IF EVERYTHING IS LOCAL. That works dandy. The problem is getting it to do it when everything is online in a web domain. I am completely baffled why the behavior of html depends on whether the pages are localed local or online, in the same folder.

phranque

9:46 pm on Oct 26, 2022 (gmt 0)

well then, let me repeat, yet again, that several questions remain unanswered.

i would suggest examining the HTTP Response headers for the main page request and look specifically for X-Frame-Options and Content-Security-Policy headers.

it would also be interesting to hear your report on whether the target attribute is specified for your anchor elements in the iframed document.

Dan99

10:44 pm on Oct 26, 2022 (gmt 0)

No X-Frame-Options and Content-Security-Policy headers in the main page.
I tried self, and parent in the page that is inside the iframe, and it doesn't work with either IF the pages are online.
If the pages are local, I believe it always works, no matter what the target attribute is.

phranque

10:56 pm on Oct 26, 2022 (gmt 0)

If the pages are local...

by "local" do you mean you are requesting a web resource from http://localhost/... (a local web server) or are you opening a local file? (i.e., using file: protocol)

lexipixel

9:46 am on Oct 28, 2022 (gmt 0)

I created (5) files:

index.htm - the page that contains an IFRAME.
framed.htm - the frame content (a list of three links to below files)
link1.htm - a linked page
link2.htm - a linked page
link3.htm - a linked page


========================
(index.htm)
========================

<!DOCTYPE html>
<head>
<title>Page with iframe</title>
</head>
<body>
<p>This is above frame.</p>
<iframe src="framed.htm" title="The framed page."></iframe>
<p>This is below frame.</p>
</body>
</html>

=========================
(framed.htm)
========================

<!DOCTYPE html>
<head>
<title>Frame content with links</title>
</head>
<body>
<p>This is in the frame.</p>
<ul>
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
</ul>
</body>
</html>

===============================
(link1.htm)
========================

<!DOCTYPE html>
<head>
<title>Link 1</title>
</head>
<body>
LINK 1 - content
</body>
</html>

===============================
(link2.htm)
========================

<!DOCTYPE html>
<head>
<title>Link 2</title>
</head>
<body>
LINK 2 - content
</body>
</html>

========================
(link3.htm)
========================

<!DOCTYPE html>
<head>
<title>Link 3</title>
</head>
<body>
LINK 3 - content
</body>
</html>

I put them all in a folder on my (WIN10) desktop called /framed/ and browsed them all locally (no server like Xammp / Laragon active), just called with:

file:///C:/Users/Me/Desktop/framed/index.htm

I created a folder /framed/ on a shared linux hosted domain and uploaded all the files and opened with:

https://example.com/framed/index.htm

Everything worked as expected in both situations,(I wanted to test as I haven't used an IFRAME in years and wanted to be sure it all still worked as I remembered).

....same questions as Phranque:

What is your local machine setup? e.g. - Are you just putting the file is a folder and browsing them as I did, or do you have Xampp, Wamp, Laragon or other local web server configured to "serve the files" ?

What is your online server (e.g. cloud instance, [shared] linux host, Windows server ) ?

The only thing I could find that might affect your ability to get it working is server config for "X-Frame-Options"

[developer.mozilla.org ]

Dan99

12:28 pm on Oct 28, 2022 (gmt 0)

Sorry, by "local", I mean the html files are just sitting on my computer. main.html and archive.html (the framed page) are there, and I just point my browser at them. Now, the framed page still points to html files that are online. So if those two are local, when you click on a link in the framed page, it opens IN THE FRAME. If those two are not local, it refuses to do so, and you need to open the link in another tab or on another page.

Dan99

12:32 pm on Oct 28, 2022 (gmt 0)

Sorry, by "local", I mean the html files are just sitting on my computer in a folder. main.html and archive.html (the framed page) are there, and I just point my browser at them. Now, the framed page still points to html files that are online. So if those two are local, when you click on a link in the framed page, it opens those online files IN THE FRAME. If those two are not local, it refuses to do so, and you need to open the link in another tab or on another page. These are Macs, and the problem appears at least with Chrome and Firefox. My online server is Hostgator.

not2easy

1:39 pm on Oct 28, 2022 (gmt 0)

If you are trying to view linked pages that are online from files stored on your local machine you would need to have complete URLs in the links. The relative URLs are only visible via browser when all the files are in a single local folder. For testing using your browser to view files that are not in the same folder you need the full https:// URL. You cannot open a live hosted html file using a relative link from your desktop. Live and local don't mix. On Macs or anything.

Dan99

2:59 pm on Oct 28, 2022 (gmt 0)

Everything has complete URLs. The issue isn't viewing linked pages, it's viewing them IN THE FRAME. No problem viewing all of them, whether online or not.

lexipixel

9:55 pm on Oct 28, 2022 (gmt 0)

I'm 99.9% sure your problem is target attribute related as phranque first suggested unless all "links in the subsidiary file" also point to documents on the same server, in the same folder, you need to add target="_self" into each and every <a></a> tag within your archive1.htm file.

e.g. --


<a href="https://google.com/" target="_self">Google</a><br />
<a href="https://www.webmasterworld.com/" target="_self">WebmasterWorld</a><br />
<a href="https://wikipedia.org/" target="_self">Wikipedia</a><br />

... my last thought is that if you do not control 100% of the content that is being pulled into that IFRAME, (e.g. linking to external sites), you may be running into frame-breaker code.

.

Dan99

10:24 pm on Oct 28, 2022 (gmt 0)

Ouch. That's going to be hard, because my "archive.html" file, which is what is in the frame, points to a hundred different documents. It's an archive! I do have 100% control of all content, BTW. It all belongs to me.

I still find it very peculiar that links in the frame open up in the frame perfectly well when everything is local, but they do not do so when online. I mean, the html is precisely the same for both, so being online changes the way the html is interpreted.

lexipixel

2:23 am on Oct 29, 2022 (gmt 0)

The target attribute can be set anywhere within the opening <a> tag.

Do a "replace all" with a text editor ----

FIND: <a href=

REPLACE WITH: <a target="_self" href=

.

phranque

7:35 am on Oct 29, 2022 (gmt 0)

while the document is the same the protocol is different (file: vs http(s):)

Dan99

12:34 pm on Oct 29, 2022 (gmt 0)

Well, yes, that's certainly a workaround. I guess I'll try that. Thanks. Fair point about differing protocol.

Now, I tried that for ONE link in my framed page, and the result was a little unexpected. The link then doesn't then open IN THE FRAME, but rather just automatically kicks open a new page on a separate tab, and opens there. Now, that's better than before, where when you clicked on it, it didn't do anything, and you had to manually tell it to open it in a new tab. In fact, that would be satisfactory to me, since I just want to have people not have to screw around trying to open it. But I'm wondering how to open the link in the same frame.

phranque

4:36 pm on Oct 30, 2022 (gmt 0)

<a target="_self" href= ...

Dan99

7:04 pm on Oct 30, 2022 (gmt 0)

Well, I mistakenly had tried target="self" href= , and that's what did what I described. When I do target="_self" href= it again does nothing at all. Click on that one link and nothing happens. What I described it did without the underscore is actually 95% satisfactory for me. What is that underscore supposed to be for?

This 31 message thread spans 2 pages: 31