CODEWITHSUNDEEP
javascript
João Saro
João Saro

Reputation: 543

How to get browser width (not document/window)?

I'm struggling to find a solution to get the browser's width, not the document width.

window.innerWidth

This is the famous method to get it but I want to get the value inside an iframe (which is smaller than browser's viewport) but with the measures from browser (not the iframe). Like, testing in codepen or jsfiddle, I only get the width from result area.

browser (width: 1260px)
  > body
    > iframe (width: 260px)
    > iframe (width: 1000px)
      here, I want to get the browser value

Upvotes: 0

Views: 137

Answers (2)

CodeRonin
CodeRonin

Reputation: 2099

let's say you have something like that

<!DOCTYPE html>
<html>
<body>

<iframe id="myFrame" src="https://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

To get the iFrame width:

javascript

document.getElementById("myFrame").width;

jQuery

$("#myFrame").width;

iFrame reference

To get browser width

javascript

window.parent.width; // or innerwidth

parent reference

To get screen width

javascript

screen.width

screen reference

You can mix all these techniques and get width of everything in your browser

Upvotes: 1

Amadan
Amadan

Reputation: 198294

This?

console.log(window.outerWidth);

window.innerWidth is the width of the area within the browser. window.outerWidth is, unsurprisingly, the width of the browser itself.

Upvotes: 1

Related Questions