The window object is created for each window that appears on the screen. A window can be the main browser window, an iframe, or even a new window created with JavaScript (pop-up).
The properties and methods of the window object gives you some control over browser windows.
- A list with properties and methods of the window object, with code and examples it is to the page: coursesweb.net/javascript/properties-methods-window
parent property refers to the parent of the current window (if that content is into an <iframe>).
<h4>Example parent</h4>
<p>Click on the button to change the background color of the parent window of this iframe.</p>
<button id='btn1'>Parent background</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
parent.document.body.style.background ='#bfbffe';
});
</script>
self property refers to the current window.
<h4>Example self</h4>
<p>Click on the button to see if this content is into an iframe or in the main window.</p>
<button id='btn1'>Check window</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
if(window.top != window.self) var msg ='This content is in iframe.';
else var msg ='This content is in the main window.';
document.getElementById('resp').innerHTML = msg;
});
</script>
top property refers to the main window in browser.
<h4>Example top</h4>
<p>When click on the button, the background color of the main (top) window is changed.</p>
<button id='btn1'>Top background</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
top.document.body.style.background ='#c0c0fe';
});
</script>
outerHeight - returns the height of the outside of the browser window (including toolbar), in pixels.
<h4>Example outerHeight</h4>
<p>Click on the button to see the height of this window.</p>
<button id='btn1'>Get outerHeight</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML ='outerHeight: '+ window.outerHeight;
});
</script>
outerWidth - returns the width of the outside of the browser window (in pixels).
<h4>Example outerWidth</h4>
<p>Click on the button to see the width of this window.</p>
<button id='btn1'>Get outerWidth</button>
<blockquote id='resp'>#resp</blockquote>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
document.getElementById('resp').innerHTML ='outerWidth: '+ window.outerWidth;
});
</script>
Pop-up windows can be created from JavaScript with specified dimensions and positions on screen.
Use this syntax:
<h4>Example window.open()</h4>
<p>When click on the button it opens a pop-up window with these properties: <em>'width=650, height=450, left=30, top=50, menubar=0, titlebar=0'</em>.</p>
<button id='btn1'>Open pop-up</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('//gamv.eu/', 'TestWin', 'width=650, height=450, left=30, top=50, menubar=0, titlebar=0');
});
</script>
window.open() method returns a reference to the opened window. Using this reference, you can open pop-up window with content created directly from JavaScript. In this case, the argument for 'URL' is an empty string.
<h4>Example, window with content from JS and Close button</h4>
<p>When you click on the button, it opens a window with HTML elements and Close button added from JavaScript.</p>
<button id='btn1'>Open pop-up</button>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
//opens pop-up
var popup = window.open('', 'TestWindow', 'width=350, height=300, left=20, top=25');
//adds html and text in pop-up
popup.document.write('<h1>Be Happy, Smile</h1>');
popup.document.write(`<blockquote style="color:#0000e0; font-size:18px;">Your most precious wealth, no one can take it from you,<br>
You can give and share without decreasing.<br>
You are always, yourself, your state of being.<br>
Give joy and peace through your state,<br>
What and how you give, you receive.</blockquote>
<h4>Share Peace and Joy, be Happy!</h4>`);
popup.document.write('<p> - I\'m not telling you what to do, the world reflects you, You transmit this to you.</p>');
//adds close button
popup.document.write('<button onclick="window.close()">Close</button>');
//sets a background to the body in pop-up
popup.document.body.style.background ='#fefee9';
});
</script>
The scroll bars of the page belong to the window object. It contains properties and methods for reading and setting the position of the page scroll bars.
scrollX - returns the number of pixels that the document has already been scrolled horizontally.scrollY - returns the number of pixels that the document has already been scrolled vertically.scrollBy(x, y) - scrolls the document in the window by the given amount of pixels: x, y (horizontally, vertically).scrollTo(x, y) - scrolls to a particular set of coordinates in the document: in pixels x, y (horizontally, vertically).scroll' to the window object.scrollTo(), and displays the coordinates of the scroll bars.
<h4>Example scrollTo()</h4>
<p style='background:#fdfddb; height:1500px; width:130%;'>When you click the button, the horizontal scroll bar moves to position 300, and the vertical bar scrolls down to position 1100 (pixels).<br>
The coordinates of the scroll bars are displayed in the button (with the 'scroll' event).<br>
- At the bottom is a scroll-top button.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>
<button onclick='window.scrollTo(0,0)' style='display:block; margin:5px 25px 8px auto;'>Go-Top</button>
<script>
var btn = document.getElementById('btn1');
btn.addEventListener('click', (ev)=>{
window.scrollTo(300, 1100);
});
//detecs the scroll event
window.addEventListener('scroll', (ev)=>{
//displays in btn the scroll bars coordinates
btn.textContent = window.scrollX +', '+ window.scrollY;
});
</script>
With the localStorage property you can store data from JavaScript in the user's browser for unlimited time, until they are deleted by the user or other script.
Datas stored with localStorage are saved as string, and can be accessed on the website from which they were added, each time the user visits that site.
- This property returns an object with methods to add and reads data stored in the browser.
localStorage.setItem('key', 'val'); - saves in web browser the value 'val' with the specified 'key'localStorage.getItem('key'); - gets the value associated to the specified 'key'localStorage.removeItem('key'); - removes from localStorage the item with specified 'key'
<h4>Example localStorage</h4>
<p>When click on the button, the text from the input field is saved in browser.<br>
Then, click on the next button to display the text saved in localStorage.</p>
<div id='dv1'>
Text: <input type='text' value='coursesweb.net' id='txt1'><br>
<button id='btn1'>Add in storage</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from storage</button>
<blockquote id='resp'>#resp</blockquote>
</div>
<script>
//stores in browser the value from #txt1, with key 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
var str = document.getElementById('txt1').value;
localStorage.setItem('some_key', str);
//display the div with the next button
document.getElementById('dv1').style.display ='none';
document.getElementById('dv2').style.display ='block';
});
//adds in #resp the text saved in localStorage, 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
document.getElementById('resp').textContent = localStorage.getItem('some_key');
});
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net