Scrollbars

window.open

strUrl Адрес для загрузки в новое окно, любая адресная строка, которую поддерживает браузер
winName Имя нового окна для использования в параметре target форм и ссылок
winParams Необязательный список настроек, с которыми открывать новое окно

Описание, примеры

Метод open создает новое окно браузера , аналогично команде «Новое окно» в меню браузера. Обычно это не вкладка, а именно новое окно, но в некоторых браузерах можно настроить то или иное поведение явным образом.

Если параметр strUrl — пустая строка, то в окно будет загружен пустой ресурс about:blank.

В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.

Связь между окнами

Метод open возвращает ссылку на новое окно, которая служит для обращения к нему и вызову его методов, если это соответствует ограничениям безопасности Same Origin.

var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes" window.open("http://ya.ru/", "Yandex", params)

Если окно с именем winName уже существует, то вместо открытия нового окна, strUrl загружается в существующее, ссылка на которое возвращается. При этом строка параметров не применяется.

В случае, когда окно открыть не удалось, например, оно заблокировано штатными Popup-blocker’ами Firefox/IE — вызов open вернет null.
Проверяйте его, если не хотите лишних ошибок в своих скриптах.

Указание пустого strUrl для существующего имени окна — удобный способ получить ссылку на это окно без его перезагрузки.

Если вы хотите открывать новое окно при каждом вызове open() — используйте для winName специальное значение ‘_blank’.

Строка параметров

Необязательная строка параметров состоит из списка разделенных запятой настроек нового окна. После открытия окна их уже нельзя будет изменить.

Если строки параметров нет или она пустая, то для нового окна будут взяты параметры по умолчанию.

Если строка параметров указана, то не перечисленные в ней параметры будут отключены(кроме titlebar/close). Поэтому включите в ней свойства, которые нужны.

Если в параметрах не указаны размеры, то новое окно будет по размеру такое же, как последнее открытое.

Если не указана позиция нового окна, то оно откроется со сдвигом в 20-30 пикселей (зависит от браузера) от последнего открытого окна.
Такой сдвиг позволяет посетителю заметить, что открылось новое окно.
Если текущее окно максимизировано, то сдвига не будет: новое тоже будет максимизировано.

Основные кроссбраузерные параметры

Параметры, касающиеся элементов управления окна, могут быть жестко установлены в конфигурации браузера. В этом случае их указание в параметрах open() не даст нужного эффекта.

left/top Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана height/width Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100 menubar Если этот параметр установлен в yes, то в новом окне будет меню. toolbar Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок location Если этот параметр установлен в yes, то в новом окне будет адресная строка directories Если этот параметр установлен в yes, то в новом окне будут закладки/избранное status Если этот параметр установлен в yes, то в новом окне будет строка состояния resizable Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр. scrollbars Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки

var newWin = window.open("http://javascript.ru", "JSSite", "width=420,height=230,resizable=yes,scrollbars=yes,status=yes" ) newWin.focus()

Заметки

Чтобы закрыть окно — используйте вызов window.close:

Чтобы показать новое окно посетителю — используйте вызов window.focus:

Источник

Javascript Scrollbars Tutorial with Examples

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- window.scrollbars

The window.scrollbars property returns a Scrollbars object, representing scroll bars surrounding the Viewport of browser. However, you can hardly interact with Scrollbars through Javascript because it has very few APIs for you.

 window.scrollbars // Or Simple: scrollbars 

The Scrollbars object has one only property such as visible. However, this property is unreliable. scrollbars.visible returns true value, which doesn’t mean that you are seeing scrollbars.

     
scollbars.visible
 
 
 alert(scrollbars.visible)   

        
Scrollbars
 Open a New Window without scrollbars   

      /** CHROME: Make the scroll bar not appear */ body 
Some Page
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
 
1 2 3 4 5 6
 
1 2 3 4 5 6 7
   

      body 
No Scrollbars
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
 
1 2 3 4 5 6
 
1 2 3 4 5 6 7
   

2- Detecting the scroll bar

Sometimes, you want to detect whether the scrollbar of a element is currently displayed Or you want to detect if the Viewport scrollbar is displayed. Below is a small library. It is useful for you in this case.

 // Private Function // @axis: 'X', 'Y', 'x', 'y' function __isScrollbarShowing__(domNode, axis, computedStyles) < axis = axis.toUpperCase(); var type; if(axis === 'Y') < type = 'Height'; >else < type = 'Width'; >var scrollType = 'scroll' + type; var clientType = 'client' + type; var overflowAxis = 'overflow' + axis; var hasScroll = domNode[scrollType] > domNode[clientType]; // Check the overflow and overflowY properties for "auto" and "visible" values var cStyle = computedStyles || window.getComputedStyle(domNode) return hasScroll && (cStyle[overflowAxis] == "visible" || cStyle[overflowAxis] == "auto" ) || cStyle[overflowAxis] == "scroll"; > // @domNode: Optional. function isScrollbarXShowing(domNode) < if(!domNode) < domNode = document.documentElement; >return __isScrollbarShowing__(domNode, 'x'); > // @domNode: Optional. function isScrollbarYShowing(domNode) < if(!domNode) < domNode = document.documentElement; >return __isScrollbarShowing__(domNode, 'y'); > // Scrollbar X or Scrollbar Y is showing? // @domNode: Optional. function isScrollbarShowing(domNode)

     
Detect Scrollbars
 
 Is Scrollbar X Showing? Is Scrollbar Y Showing? 
 
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
   

      #my-div function detectScrollbarXOfDiv() 
Detect Scrollbars of an Element
 
 Is Div Scrollbar X Showing? 
Div:
  
  

View more Tutorials:

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.

• The Complete JavaScript Bootcamp
• Getting really good at JavaScript and TypeScript
• Essentials of JavaScript Practice Coding Exercises Tips
• Learn JavaScript From Scratch:Become Top Rated Web Developer
• JavaScript For Beginners — Learn JavaScript From Scratch
• Javascript for Beginners
• Learning ECMAScript 6: Moving to the New JavaScript
• JavaScript Intro to learning JavaScript web programming
• JavaScript Dynamic Quiz Application from Scratch JSON AJAX
• Byte-Sized-Chunks: Dynamic Prototypes in Javascript
• Learn ECMAScript 2015 — ES6 Best Course
• Getting started with javascript and its core concepts
• Quick JavaScript Core learning Course JavaScript Essentials
• HTML CSS JavaScript: Most popular ways to code HTML CSS JS
• Learn JavaScript Fundamentals
• * * Master ECMAScript 2015 (ES6)
• * * Start 3D GIS Web Development in JavaScript
• Learning JavaScript Programming Tutorial. A Definitive Guide
• 2D Game Development With HTML5 Canvas, JS — Tic Tac Toe Game
• JavaScript for Beginning Web Developers
• The Web Development Course: HTML5, CSS3, JavaScript
• JavaScript in 55 Minutes
• The complete beginner JavaScript ES5, ES6 and JQuery Course
• JavaScript in Action JavaScript Projects
• * * Introductory To JavaScript — Learn The Basics of JavaScript

Источник

Руководство Javascript Scrollbars

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- window.scrollbars

Свойство (property) window.scrollbars возвращает объект Scrollbars представляющий полосы прокрутки (scroll bars) окружающие Viewport браузера. Но вы почти не можете взаимдействовать с Scrollbars через Javascript так как он имеет очень мало API для вас.

 window.scrollbars // Or Simple: scrollbars 

Объект Scrollbars имеет единственное свойство (property) это visible. Но данное свойство ненадежно, scrollbars.visible возвращает значение true, это не означает чтобы вы видите полосы прокрутки.

     
scollbars.visible
 
 
 alert(scrollbars.visible)   

        
Scrollbars
 Open a New Window without scrollbars   

      /** CHROME: Make the scroll bar not appear */ body 
Some Page
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
 
1 2 3 4 5 6
 
1 2 3 4 5 6 7
   

      body 
No Scrollbars
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
 
1 2 3 4 5 6
 
1 2 3 4 5 6 7
   

2- Обнаружение полосы прокрутки

Иногда вы хотите обнаружить (detect) отображается ли полоса прокрутки определенного элемента или нет? Или хотите обнаружить полоса прокрутки у Viewport отображается или нет? Ниже является маленькая библиотека, которая может быть вам полезна в данной ситуации.

 // Private Function // @axis: 'X', 'Y', 'x', 'y' function __isScrollbarShowing__(domNode, axis, computedStyles) < axis = axis.toUpperCase(); var type; if(axis === 'Y') < type = 'Height'; >else < type = 'Width'; >var scrollType = 'scroll' + type; var clientType = 'client' + type; var overflowAxis = 'overflow' + axis; var hasScroll = domNode[scrollType] > domNode[clientType]; // Check the overflow and overflowY properties for "auto" and "visible" values var cStyle = computedStyles || window.getComputedStyle(domNode) return hasScroll && (cStyle[overflowAxis] == "visible" || cStyle[overflowAxis] == "auto" ) || cStyle[overflowAxis] == "scroll"; > // @domNode: Optional. function isScrollbarXShowing(domNode) < if(!domNode) < domNode = document.documentElement; >return __isScrollbarShowing__(domNode, 'x'); > // @domNode: Optional. function isScrollbarYShowing(domNode) < if(!domNode) < domNode = document.documentElement; >return __isScrollbarShowing__(domNode, 'y'); > // Scrollbar X or Scrollbar Y is showing? // @domNode: Optional. function isScrollbarShowing(domNode)

     
Detect Scrollbars
 
 Is Scrollbar X Showing? Is Scrollbar Y Showing? 
 
 
1
 
1 2
 
1 2 3
 
1 2 3 4
 
1 2 3 4 5
   

      #my-div function detectScrollbarXOfDiv() 
Detect Scrollbars of an Element
 
 Is Div Scrollbar X Showing? 
Div:
  
  

View more Tutorials:

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.

• The Complete JavaScript Bootcamp
• Getting really good at JavaScript and TypeScript
• Essentials of JavaScript Practice Coding Exercises Tips
• Learn JavaScript From Scratch:Become Top Rated Web Developer
• JavaScript For Beginners — Learn JavaScript From Scratch
• Javascript for Beginners
• Learning ECMAScript 6: Moving to the New JavaScript
• JavaScript Dynamic Quiz Application from Scratch JSON AJAX
• JavaScript Intro to learning JavaScript web programming
• Byte-Sized-Chunks: Dynamic Prototypes in Javascript
• Learn ECMAScript 2015 — ES6 Best Course
• Getting started with javascript and its core concepts
• HTML CSS JavaScript: Most popular ways to code HTML CSS JS
• Quick JavaScript Core learning Course JavaScript Essentials
• * * Master ECMAScript 2015 (ES6)
• Learn JavaScript Fundamentals
• * * Start 3D GIS Web Development in JavaScript
• Learning JavaScript Programming Tutorial. A Definitive Guide
• 2D Game Development With HTML5 Canvas, JS — Tic Tac Toe Game
• JavaScript in 55 Minutes
• JavaScript for Beginning Web Developers
• The Web Development Course: HTML5, CSS3, JavaScript
• The complete beginner JavaScript ES5, ES6 and JQuery Course
• JavaScript in Action JavaScript Projects
• * * Introductory To JavaScript — Learn The Basics of JavaScript

Источник