Dynamically changed frames

Discussion in 'JavaScript' started by ker, Mar 26, 2011.

0
Page 1 of 2
  1. #1
    Hello!
    I wonder how can I open dynamically changed frame on top through another frame.
    Thank You!!
     
    ker, Mar 26, 2011 IP
  2. Deu

    Deu Peon

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #2
    you have to give the frame a name say "frame1"
    then access it via parent object like
    parent.frame1.{whatever you wanna change} then doTheChange()
     
    Deu, Mar 26, 2011 IP
  3. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #3
    I tried this but I had some errors...
    here is startpage:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Frames</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

	<frameset rows="25%,75%">
		
		<frame name="frame1" src="frame1.html" />
		<frame name="frame2" src="http://forums.digitalpoint.com" />
	
	</frameset>

</html>
    HTML:
    And here is frame1:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>frame1</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
	<button type="button" onclick="window.location(parent.frame2.location)">Close this frame</button>
</body>

</html>
    HTML:
     
    ker, Mar 27, 2011 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    First of all, your startpage's doctype should be frame doctype. Secondly on frame1, try adding "top" to the <button> line. Then perhaps you should change "location" to "src".

    I'm not sure about the last blue change though; see the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>frame1</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <button type="button" onclick="window.[B][COLOR="red"][SIZE="4"]top[/SIZE][/COLOR][/B].location(parent.frame2.[SIZE="4"][COLOR="blue"][B]src[/B][/COLOR][/SIZE])">Close this frame</button>
</body>

</html>
    Code (markup):
     
    hdewantara, Mar 28, 2011 IP
  5. tianli

    tianli Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    you have to give the frame a name say "frame1"
     
    tianli, Mar 28, 2011 IP
  6. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #6
    I tried both
    <button type="button" onclick="top.location.href=parent.frame2.src">Close this frame</button>
    HTML:
    and
    <button type="button" onclick="top.location.href=parent.frame2.href">Close this frame</button>
    HTML:
    but it always tries to load website "undefined"...
    Help me, please!
     
    Last edited: Mar 28, 2011
    ker, Mar 28, 2011 IP
  7. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #7
    Hi Ker. You cannot read location.href from foreign domain for security reasons. Here is demo:

    index.html
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Frames</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

    <frameset rows="25%,75%">
       
        <frame name="frame1" src="frame1.html" />
        <frame name="frame2" src="http://forums.digitalpoint.com" />
   
    </frameset>

</html>
    Code (markup):
    frame1.html
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>frame1</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <button type="button" onclick="window.top.frames['frame1'].location.href='http://www.google.com'">Google frame</button>
    <button type="button" onclick="alert(window.top.frames['frame1'].location.href)">Current frame location</button>
    <button type="button" onclick="alert(window.top.frames['frame2'].location.href)">Foreign domain location</button>
</body>

</html>
    Code (markup):
    First and second button work, but the third displays in console:

    Permission denied to access property 'href'
    onclick()7 (line 2)
    event = click clientX=388, clientY=14
    alert(window.top.frames.frame2.location.href);

    You can read location.href from your domain.
    If it is possible, try to avoid using frameset...
     
    Jan Novak, Mar 28, 2011 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    Jan is right, I forgot about crossing domain. It seems that either "top.frame2" or "parent.frame2" would always give window object which is on another domain.

    Perhaps DOM approach would give better result (see below).
    So instead of getting Window object, we just examine the Node of that Window.
    <button type="button"
  onclick="top.location=parent.document.getElementsByName('frame2')[0].src">
  Close this frame
</button>
    Code (markup):
     
    hdewantara, Mar 29, 2011 IP
  9. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #9
    OK, thank You!
    But how can I go to that location other way?
     
    ker, Mar 29, 2011 IP
  10. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #10
    Use the code from hdewantara. It reads your frameset file, so it will work fine.
     
    Jan Novak, Mar 29, 2011 IP
  11. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #11
    It doesn't work eather...
     
    ker, Mar 29, 2011 IP
  12. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #12
    So did your browser report any errors/ warnings? I guess you are using IE, which doesn't recognize getElementsByName():http://www.quirksmode.org/dom/w3c_core.html#t124 :D
    Try use getElementsByTagName() instead, I think it is more compatible...
     
    Last edited: Mar 29, 2011
    hdewantara, Mar 29, 2011 IP
  13. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #13
    I use Google Chrome.
    Here's my code, I can't find any errors, can You correct my code?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>frame1</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
	<button type="button" onclick="top.location=parent.document.getElementsByName('frame2')[0].src">Close this frame</button>
</body>

</html>
    HTML:
     
    ker, Mar 29, 2011 IP
  14. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #14
    Hmm, I don't see any syntactical errors.
    Ahh wait... did you run this on your local PC? In that case,
    I'm afraid Chrome just couldn't see whether 2 local files reside on the same domain.

    Test this one on my server: http://www.smokingscript.com/test/ker/startpage.html
    And see the sources. Both are exactly the same startpage.html and frame1.html we discussed here.
     
    hdewantara, Mar 29, 2011 IP
  15. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #15
    OK, that works but when I click on button, google.com shows on top, but not current location of frame2.
    Button behaves like following:
    <button type="button" onclick="top.location='http://google.com'">Close this frame</button>
    HTML:
     
    ker, Mar 30, 2011 IP
  16. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #16
    Did you mean the original location of frame2 i.e. http://forums.digitalpoint.com ?
    Yeah I had changed the src within startpage.html. Surely you could change it back easily.
     
    hdewantara, Mar 30, 2011 IP
  17. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #17
    No, when I click button I want to load to top current frame2 location e.g. forums.digitalpoint.com/showthread.php?t=2132576 but not starting position (forums.digitalpoint.com).
    Following code always opens frame2 startpage (google.com), but I want current location.
     <button type="button" onclick="top.location=parent.document.getElementsByName('frame2')[0].src">Close this frame</button>
    Code (markup):
    Thanks
     
    ker, Mar 30, 2011 IP
  18. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #18
    Wow, I don't think you could;
    this technique would limit you to just relocate user browser to what's in frame2's src.

    Perhaps you just keep a user on startpage.html, not relocating him to anywhere.
    And when user clicks the button, frame1 dissapears from DOM and frame2 becomes 100% wide occupying the whole frameset.

    Well it is just an idea, untested.
     
    hdewantara, Mar 30, 2011 IP
  19. ker

    ker Peon

    Messages:
    97
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #19
    Hmmm, and if button hides frame1, top url is going to be startpage.html or url of frame2?
    Thanks
     
    ker, Mar 30, 2011 IP
  20. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #20
    Doesn't matter, does it? But unfortunately I couldn't get this idea working.

    The best result I got to retain frame2's position/current location is by adjusting the frameset's rows:
    <button type="button" onclick="parent.document.getElementsByTagName('frameset')[0].rows = '0%,100%';">Close this frame</button>
    HTML:
    Now we should name this button as "Hide this frame", instead of "Close this frame" :D :cool:
    See the test here -> http://www.smokingscript.com/test/ker/startpage_.html
     
    Last edited: Mar 31, 2011
    hdewantara, Mar 31, 2011 IP
Page 1 of 2