Javascript open window with scrollbars

Window open()

The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.

See Also:

Syntax

Parameters

Deprecated

• true — URL replaces the current document in the history list
• false — URL creates a new entry in the history list

Warning

Chrome throws an exception when using this parameter.

Return Value

More Examples

Open an about:blank page in a new window/tab:

Open a new window called «MsgWindow», and write some text into it:

var myWindow = window.open(«», «MsgWindow», «width=200,height=100»);
myWindow.document.write(«

This is ‘MsgWindow’. I am 200px wide and 100px tall!

«);

Replace the current window with a new window:

var myWindow = window.open(«», «_self»);
myWindow.document.write(«

I replaced the current window.

«);

Open a new window and control its appearance:

window.open(«https://www.w3schools.com», «_blank», «toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400»);

Open a new window. Use close() to close the new window:

function openWin() <
myWindow = window.open(«», «myWindow», «width=200,height=100»); // Opens a new window
>

function closeWin() myWindow.close(); // Closes the new window
>

Open a new window. Use the name property to return the name of the new window:

var myWindow = window.open(«», «MsgWindow», «width=200,height=100»);
myWindow.document.write(«

This window’s name is: » + myWindow.name + «

«);

Using the opener property to return a reference to the window that created the new window:

var myWindow = window.open(«», «myWindow», «width=200,height=100»); // Opens a new window
myWindow.document.write(«

This is ‘myWindow’

«); // Text in the new window
myWindow.opener.document.write(«

This is the source window!

«); // Text in the window that created the new window

Browser Support

open() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник

Vertical scrollbars with window.open

Solution 4: You can check document height, then check window height and if document height is a bigger number, then you have scrollbars. Is there a way to specify, «Show only horizontal scrollbars, if needed» to popop window.

Vertical scrollbars with window.open

I am opening a popop windows with window.open. I want the scrollbars to show up if needed. However in safari, the scrollbars are not showing up unless I set, scrollbars=1,

However that makes even horizontal scrollbars show up. Is there a way to specify,

«Show only horizontal scrollbars, if needed» to popop window.

(Possibly via some combinations of options to window.open, and overflow, css property.)

I’ve been messing with this a little and I settled on this solution until I find a better one:

window.open('http://yoursite.com','mypopup', 'status=1,width=500,height=500,scrollbars=1'); 

Then in the CSS of yoursite.com, put this:

In some browsers, a vertical scrollbar may show even if the content fits in the window. But the horizontal scroll bar should not show.

After searching a lot I found this suitable

window.open("http://www.classi5.blogspot.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400" 

Window.open() in safari, User-503402950 posted Hi, I couldn’t get the following code running in safari and chrome. string entryURL = «Test.aspx»; string script = » var printWindow

Window.open not resizable, scrollable

I tried window.open and want the javascript to open a new browser with new url and wants the new window to be resizable and scrollable

window.open("someurl", '_blank','windowOpenTab', 'scrollbars=1,resizable=1,width=1000,height=580,left=0, top=0'); 

Edit1 : tried window.open(url, ‘_blank’,’windowOpenTab’, ‘scrollbars=1,resizable=1,width=1000,height=580,left=0,top=0’); still no luck

read about window.open from http://www.javascript-coder.com/window-popup/javascript-window-open.phtml but no luck 🙁

According to MDN you can only have 3 parameters in that function.

window.open(strUrl, strWindowName[, strWindowFeatures]); 

Demo here — I droped the ‘_blank’ and made a demo with small window just to make the scrollbar showup.

window.open("someurl", 'windowOpenTab', 'scrollbars=1,resizable=1,width=1000,height=580,left=0,top=0'); 

 window.open("someurl", '_blank','windowOpenTab', 'scrollbars=1,resizable=1,width=1000,height=580,left=0, top=0'); 

 window.open("someurl", 'windowOpenTab', 'scrollbars=1,resizable=1,width=1000,height=580,left=0, top=0'); 

Just remove the _blank , FIDDLE.

popupWin = window.open('http://webdesign.about.com/', 'open_window','menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0') 

How to do window.open with no scrollbars in Google Chrome, The following code opens the new window without scrollbars in Firefox, IE and Opera. var options = < height: 300, // sets the height in pixels of the window. width: 300, // sets …

Enabling browser scroll bars after window.open with scrollbars=no

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:

For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.

This works in IE using the following code:

However this does not work in FireFox or Chrome.

According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)

 document.documentElement.style.overflow='scroll'; document.body.style.overflow='scroll'; 

Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?

Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:

Instead of setting a fixed height, I would set height:100% , which enable you to open the popup also in different sizes than the original.

 The rest of your HTML code 

This is also not the best solution, but you are actually removing the restictions you get from the link.

Hope you find this answer helpful.

Since you add js for IE I assume you can change the way displayed page works. In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;

Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px . I will show you the whole code.

put it into example.html . Height you can get from your code window.open(«example.html», «name», «resizable=1,scrollbars=no,width=500,height=200»); .

This is not the the actual solution but it will solve your problem in every browser.

Window.open(), The Window interface’s open() method takes a URL as a parameter, and loads the resource it identifies into a new or existing tab or window. The target parameter determines which …

Detect if window has scrollbar in IE using javascript

When i call window.open, I can include a list of parameters. One of these paramaters is scrollbars, which can be set to yes or no .

When I put javascript in the child window, the javascript needs to detect if scrollbars were set to yes or no when the window was opened. I want to know if the window has scrollbars enabled by default or not.

I only care about doing this in IE. How do I check? window.scroolbar does not work in IE.

How do I do this? To be perfectly clear, I’m not talking about div overflows, I’m talking about the scrollbar property of the window.

edit:
— I am in IE so window.scrollbars/this.scrollbars won’t return anything
— The windows scrollbars exist outside the body.
— Looking at the document’s width will tell me about the document. I can even figure out if there are scrollbars in the document. This will not tell me anything about the window itself.
— The width of the window’s scrollbar changes dependent on what the currently selected Windows Desktop Theme is, for ascetic reasons.

Alongside your script that opens the child window (the one where you set scrollbars=yes or no), add a window-level variable that’s true if scrollbars=yes, or false if no.

Then in your child window’s script, you look up the value that’s been set from self.opener.myWindowLevelVariable .

You could also namespace the variable. The important part is self.opener or window.opener if you prefer.

In response to your update about not wanting to use a variable in the parent. Then reverse my initial suggestion. Put the variable in the child when it’s created.

var scrollwindow = window.open("file.htm", "anotherwindow", "width=400,height=250,scrollbars=no"); scrollwindow.hasScrollbars = false; 

If you want to handle the case where the child window is opened directly, then it gets more interesting.

try < // do something with hasScrollbars // If it isn't true or false, ie undefined, using it will throw you into the catch. alert(hasScrollbar); >catch (e) < // scrollbars weren't explicitly added or forbidden, so they'll automatically // show up if the content is larger than the window. In this case, use a // scrollbar sniffing technique. var hasVerticalScrollbar = document.body.scrollHeight >document.body.clientHeight; var hasHorizontalScrollbar = document.body.scrollWidth > document.body.clientWidth; > 

Scrollbar sniffing: I think this is what Stephano was going for. He was on the right track. But use clientWidth, scrollWidth, clientHeight, and scrollHeight in combination. From quirks mode:

If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.

When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.

So, you’ll have to adjust the scrollbar sniffing part a bit for IE, but that’s the basic idea.

You can determine if the window has a visible scrollbar in IE by using this little JavaScript trick:

//You'll have to modify this so as not to do it unless your user is running IE window.attachEvent('onload', getChrome); function getChrome() < //read the window width and height var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; //set the window to that size window.resizeTo(w, h); //read the window width and height again var newW = document.documentElement.clientWidth; var newH = document.documentElement.clientHeight; //calculate the difference var diffX = w - newW; var diffY = h - newH; //set the window back to what it was window.resizeBy(diffX, diffY); alert('diffX: ' + diffX + '\ndiffY: ' + diffY); //If diffX is larger than 10 (in Vista and Windows 7, the borders are 5px each) //then you're scrollbar is visible. >

This is a little hacky, but it seems to work:

function has_scrollbar() < if (document.documentElement.clientHeight < document.body.offsetHeight) < alert("vertical scrollbar"); >else < alert("no vertical scrollbar"); >> 

You check the size of the offsetHeight (html content) and compare it with the documentElement.clientHeight (window height for IE). You can switch out «width» for «height», obviously.

You can check document height, then check window height and if document height is a bigger number, then you have scrollbars.

However, because IE will display always scrollbars (even if you don’t have anything to scroll) you may want to set overvlow:auto for body tag.

Javascript — window.open not resizable, scrollable, window.open not resizable, scrollable. Ask Question Asked 8 years, 9 months ago. Modified 5 years, 2 months ago. Viewed 54k times 10 4. I tried window.open and want the …

Источник