Search code examples
htmlanchorframetargetframeset

(HTML frame tag) target frame won't work again after clicked

we were tasked to create a web program as quiz that will perform as a pdf page navigator using frameset and frame tag , my problem is that after i clicked on an anchor tag, if i clicked on anchor tag again the targeted frame won't show or prompt again.

how can i make other anchor tag clickable and prompt to targeted frame again after i clicked on an anchor tag? its hard to find about frame since its obsolete.

here is my code:

frame

<frameset rows="20%,70%,10%" frameborder="0" border="0" framespacing="0">
    <frameset cols="20%,80%" frameborder="0" border="0" framespacing="0">
        <frame name="logo" src="logo.html" noresize="noresize">
        <frame name="banner" src="banner.html">
    </frameset>
<frameset cols="20%,80%" frameborder="0" border="0" framespacing="0">
    <frame name="menu" src="menu.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
</frameset>

  <frame name="footer" src="footer.html" scrolling="no">

pdf page navigator

<a href="tr_css.pdf#page=1" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">
<a href="tr_css.pdf#page=2" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">
<a href="tr_css.pdf#page=3" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">
Solution

  • From a programmers perspective this is a nightmare of 3rd party dependencies, and emulations.

    I do not think it matters if frame or iframe, I had the same problem with Edge iframes. Will it work with Mac Safari, Microsoft Edge, Android Chrome :-) or cross platform Mozilla FireFox / Acrobat based PDF plug-ins?

    And the answer is it should work with FireFox since PDF.js is not a conventional PDF viewer.

    However although designed by Acrobat for use via ActiveX in MS Trident those #page=# may not work the same way with Acrobat imbedded in more recently secured Chrome or Edge.

    Here in Firefox without Acrobat, I have been through Page 1 then 2 then 3 no problem.

    enter image description here

    Now a related issue with Edge (and possibly others) is each time you load a PDF, a user default preference may be set to always open same page.

    When using Edge there is a user over-ride. which for testing, needs to be switched off by the user, whereby reloading a PDF will always show the same page.

    However switching that off (shown as part of top right of this image) still does not help with Chromium based PDF viewers.

    enter image description here

    So what is needed to reload each page in turn for Chrome is presumably the same as used here for Edge where I can "Navigate" by reload /download whole file as pages in any order like 1 2 3.
    enter image description here

    That answer was provided by Yu Zhou (https://stackoverflow.com/users/11490347/yu-zhou) when I asked for any similar workarounds to the Chrome cache locking of the current file.

    So try this as your Menu.html

    <a href="tr_css.pdf?=1#page=1" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">page 1</a><br>
<a href="tr_css.pdf?=2#page=2" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">page 2</a><br>
<a href="tr_css.pdf?=3#page=3" target = "content" class="list-group-item list-group-item-action py-3 lh-sm text-black" aria-current="true">page 3</a><br>