-2

I have two iframes and I need to load another local page (help_content.html) (into my bottomframe) on the click of a button (in my topframe). The topframe has a form (help_form.html) with 3 buttons (2 which work) and the bottomframe is currently a blank.html that needs to load help_screen.html on the click of the button.

HTML from help_screen.html

<iframe name="topframe" id="topframe" src="help_form.html"><p>Your browser cannot view iFrames</p></iframe>
<br/>
<iframe name="bottomframe" id="bottomframe" src="blank.html"><p>Your browser cannot view iFrames</p></iframe>

Javascript

function openHelp() {       
document.getElementById("bottomframe").src="help_screen.html";
    }

HTML from button on help_form.html

<input type="button" name="help1" value="Click for help" onclick="openHelp()" />
aingelic
  • 1
  • 1
  • 3

3 Answers3

0

In your javascript,
you have set the src to help_screen.html
while you should have set it to help_content.html

EDIT

help_screen.html must contain this code: 

<!DOCTYPE html>
<html>
    <head>
        <script>
            function openHelp() {

                 var frame = document.getElementById("bottomframe");
                 frame.setAttribute("src", "help_content.html");
            }
        </script>
    </head>


    <body>
        <iframe name="topframe" id="topframe" src="help_form.html">Your browser suckss...</iframe>

        <iframe name="bottomframe" id="bottomframe" src="#">Your browser really suckss...</iframe>
     </body>             
</html>

Your help_form.html must contain this button:

<input type="button" onclick="parent.window.openHelp()">
Aditya Singh
  • 2,343
  • 1
  • 23
  • 42
  • Thank you Aditya for your response. I have just tried all combinations, but unfortunately it still is not working. – aingelic Jun 22 '14 at 06:23
  • Thanks, but it still is not working. My directory is follows... order_form.html (main page with a button that opens help_screen.html) help_screen.html (has both the iframes - topframe and bottomframe) help_form.html (populates the iframe (topframe) and has the button to onclick to populate the bottomframe with help_content.html) help_content.html (is the page I want to populate the bottomframe) blank_page.html (is the current page of bottomframe) I think you may be on the right track, but maybe missing one step in the mass of pages. – aingelic Jun 22 '14 at 06:44
  • The aim is to open a window that when the button is clicked on the top frame, it opens the help below to give instructions on filling out the form above it. – aingelic Jun 22 '14 at 06:48
  • @aingelic Can you please tell me in which file did you place your javascript snippet? and does your `help_screen.html` opens up on a separate tab, on the same tab, or in an iframe? – Aditya Singh Jun 22 '14 at 06:53
  • I have a javascript file called music.js that is linked to my html pages – aingelic Jun 22 '14 at 06:58
  • what have you linked `music.js` in your `help_screen.html` file? – Aditya Singh Jun 22 '14 at 07:00
  • as with all my pages on my site – aingelic Jun 22 '14 at 07:03
  • My help_screen.html open from my order_form.html function helpWin() { window.open("help_screen.html","_blank","width=424, height=434"); } – aingelic Jun 22 '14 at 07:10
  • write the openHelp() function separately in help_screen.html and then use parent.window.openHelp() – Aditya Singh Jun 22 '14 at 07:12
  • I would love to do that as a work around, but I have to have all of the javascript in my js file as it is an assignment and thats what the directions state. – aingelic Jun 22 '14 at 07:33
  • I just asking you to try that once. if it works, put it back in your .is file. coz if it works by separating out the openHelp function, means that there is some problem in linking your. is file – Aditya Singh Jun 22 '14 at 07:36
  • I tried and it does not work either. I can get an alert to pop up, but content wont load. – aingelic Jun 22 '14 at 07:43
  • Ok, do it like this... `document.getElementById("bottomFrame").setAttribute("src", "help_screen.html")` – Aditya Singh Jun 22 '14 at 07:53
  • Thank you @Aditya, but that also is not working unfortunately – aingelic Jun 22 '14 at 08:00
  • Thanks Aditya. I feel silly for that mistake. With those changes in your current edit, I still can not get it to run. – aingelic Jun 22 '14 at 08:38
  • you should keep all your files in the same directory. and test it out – Aditya Singh Jun 22 '14 at 08:40
0

You don't need to call the window field of the parent, just call the function directly from it, since parent is already a reference to the window:

onclick="parent.openHelp();"

As this question suggests (quoting):

… See window.parent

Returns a reference to the parent of the current window or subframe.

If a window does not have a parent, its parent property is a reference to itself.

When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.

Provided that the function is defined on help_screen.html.

However, if your function is defined on a child, you should call it like this (as this question suggests):

parent.document.getElementById("bottomFrame").contentWindow.openHelp();

Or:

parent.document.bottomFrame.contentWindow.openHelp();
Community
  • 1
  • 1
arielnmz
  • 8,354
  • 9
  • 38
  • 66
  • Thank you arielnmz. I have just attempted all your suggestions, but still having no luck to get it to show. – aingelic Jun 22 '14 at 07:04
  • Where is the javascript code defined? If you put an `alert('hola');` right at the beginning of your function, do you actually see the alert? – arielnmz Jun 22 '14 at 07:23
  • Yes the alert will pop up onclick of the button – aingelic Jun 22 '14 at 07:31
  • What is the output of `alert(document.getElementById("bottomFrame"));`? – arielnmz Jun 22 '14 at 07:46
  • it says null when it pops up – aingelic Jun 22 '14 at 07:54
  • Your javascript function is in `help_screen.html` right? – arielnmz Jun 22 '14 at 07:58
  • No, I have a javascript file called music.js that is linked to my html pages. ''. The onlick event happens from 'help_form.html' which is in the topframe, – aingelic Jun 22 '14 at 08:08
  • Then you have to get the reference to the frame where `help_screen.html` is loaded and then get the reference of the frame you want to change, like this: `document.getElementById("yourTopFrame").contentWindow.getElementById("bottomFrame").src = …` – arielnmz Jun 22 '14 at 08:12
  • Am I using that just with `onclick="openHelp();"` ? – aingelic Jun 22 '14 at 08:17
  • So, `help_form.html` contains a frame that loads `help_screen.html` right? and the button is in `help_form.html` right? and the javascript function is defined on or linked to `help_form.html` right? Please put your frames hierarchy and where is the javascript loaded and from where the function is executed. – arielnmz Jun 22 '14 at 08:26
  • Aditya who is also responding just noticed in my original post that in my original javascript, I was asking for the src as `help_screen.html` instead of `help_content.html`! Silly me! – aingelic Jun 22 '14 at 08:33
  • My directory is follows... `order_form.html` (main page with a button that opens `help_screen.html`) `help_screen.html` (has both the iframes - topframe and bottomframe) `help_form.html` (populates the iframe (topframe) and has the button to onclick to populate the bottomframe with `help_content.html`) `help_content.html` (is the page I want to populate the bottomframe) `blank_page.html` (is the current page of bottomframe) – aingelic Jun 22 '14 at 08:35
  • My help_screen.html opens from my order_form.html `` `function helpWin() { window.open("help_screen.html","_blank","width=424, height=434"); }` – aingelic Jun 22 '14 at 08:36
  • Where is the function defined? – arielnmz Jun 22 '14 at 08:51
  • My functions are all in my music.js file – aingelic Jun 22 '14 at 08:59
  • Where is it being linked? – arielnmz Jun 22 '14 at 09:01
  • There is a `` in the head of all my pages – aingelic Jun 22 '14 at 09:03
  • Ok, now what is the page that calls the function? – arielnmz Jun 22 '14 at 09:04
  • the 'help_form.html' has the onclick event – aingelic Jun 22 '14 at 09:08
  • just make that function get a reference of the document that holds the frame that you want to change, i.e. `openHelp(document)`, then you just find your frame on that document and modify the src. – arielnmz Jun 22 '14 at 09:11
  • Im not sure I follow correctly. So the `openHelp(document)` goes in the onclick event or I do that in the function itself? – aingelic Jun 22 '14 at 09:19
  • Both, also please post your complete frames hierarchy. – arielnmz Jun 22 '14 at 09:21
  • in the function, do I do `document.getElementById("bottomfra‌​me").src = "help_content.html";`??? Sorry just feeling a little confused again now after everything else I have been trying. Still a newbie. – aingelic Jun 22 '14 at 09:24
  • Yes, only if such id, `bottomFrame` is directly accessible from where you call the function, please put your frames hierarchy on your question. – arielnmz Jun 22 '14 at 09:26
  • `
    `     – aingelic Jun 22 '14 at 09:28
  • order_form.html - button onclick opens function helpWin() helpWin() function opens a window, which is populated by help_screen.html help_screen.html has two iframes ("topframe" and "bottomframe") topframe is populated by help_form.html bottomframe is populated by blank.html help_form.html has button onclick openHelp() openHelp() should populate bottomframe with help_content.html – aingelic Jun 22 '14 at 09:45
  • Ok so you have to call `parent.document.bottomFrame.src = …` on your function – arielnmz Jun 22 '14 at 09:49
  • I thank you so very much for your time and effort, but this still doesn't seem to be working. I did `function openHelp(document) { parent.document.bottomframe.src="help_content.html"; }` and then `onclick="openHelp(document);"` – aingelic Jun 22 '14 at 10:02
  • I think you might have to move your button and your JavaScript yo the page that contains the frame that you want to change – arielnmz Jun 22 '14 at 10:04
  • Thanks @arielnmz I really appreciate all your help. Unfortunately I have to keep it as is, as that is how Ive have been requested to do it for my assignment. I will just keep playing with it and use all the information you've been able to provide me with and hope that it eventually fall into place. :) – aingelic Jun 22 '14 at 10:37
0

I got it working by using function openHelp(document){ parent.document.getElementById('bottomframe').src="help_content.html"; } Although it wont work on Chrome, I am happy it is working at all. Thank you very much @Aditya and @arielnmz for all your help. It is appreciated.

aingelic
  • 1
  • 1
  • 3