CODEWITHSUNDEEP
javascripthtmliframe
Ip ziet
Ip ziet

Reputation: 307

how to pop-out, pop-in iframes like Gmail hangout

Pop-out a chat windows (using iframe) to new tab then pop-in it to get it back to the windows ..like Google does with they hangout chat windows in Gmail web.

I have been googling but could figure it out. Maybe my knowledge is not good enough

Upvotes: 2

Views: 1562

Answers (1)

TiGreX
TiGreX

Reputation: 1816

i mean that you want to say when you click in the arrow into the box, then is opening a popup with the chat.

I'm not sure that google do this, but is a way to do the same effect for the user.

When you click there, there open a pop up, the procediment to do this is the next;

you create a function in JS with window.open() this opens a window

If you want to open a page inside the window you have to specified it

window.open("chat.php")

the method open allows 3 parameters

window.open(document,name of the window,attributes of the window)

  1. Document

    Uri of the doccument to be loaded into the popup.

  2. Name of the window

    Identified for the window, you can do references to this id after is opened.

  3. Attributes of the window

    A couple of name/value to assign different options for this widow, there are:

    • Width (of the window in pixels)
    • height (of the window in pixels)
    • top : position of the window starting on the top
    • left: position of the window starting on the left
    • toolbar, if you want to show the toolbar or not (boolean)
    • status, if you want to show the status bar (boolean)
    • location, if you want to show the location bar.
    • directories, if you want to show the personal bar.
    • scrollbars, if you want to show the scrollbar
    • menubar if you want to show the menubar

this is a example of how to open a new window :

function openPopUp(){
     newpopup = window.open('chat.html/user1=xxxx?user2=yyyy','newwindow','width=300, height=400')
}

the back-end of this page is going to load the chat between the user 1 and 2.

now to go back to the parent window.

you can return a value then when you click in the arrow to go back, they should be something in the onclick function like 

function returnPopUp(){
    top.close();
    return "user1=xxxx?user2=yyyy"
}

then they load the frame in the parent window again.

and as I told you before, something similar for the newpopup close listener.

Thanks.

Upvotes: 1

Related Questions