0

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
2

2 Answers 2

1

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.

1

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

3
  • I'm trying to avoid to get iframe width. Again, I want the browser width, not the document/window. So, in a codepen or jsfiddle, I would get all browser width, not the result/iframe/canvas areas.
    – João Saro
    Commented May 13, 2019 at 9:30
  • so you have a browser window opend, inside that window a document and inside the document an iFrame right? What area do you want? and where do you want to display it?
    – CodeRonin
    Commented May 13, 2019 at 9:35
  • Imagine a browser with 1260px width. Two iframes, 630px width each. Inside an iframe, I want to get the value from the browser (1260px).
    – João Saro
    Commented May 13, 2019 at 9:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.