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
João Saro
  • 543
  • 1
  • 7
  • 22
  • Possible duplicate of [How to get browser width using JavaScript code?](https://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code) – Lu Chinke May 13 '19 at 09:15
  • Please, read my question again. I add one more sentence, maybe I was not clear. – João Saro May 13 '19 at 09:29

2 Answers2

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

GJCode
  • 1,959
  • 3
  • 13
  • 30
  • 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 May 13 '19 at 09: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? – GJCode May 13 '19 at 09: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 May 13 '19 at 09:39
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.

Amadan
  • 191,408
  • 23
  • 240
  • 301