StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I set out to achieve something similar and the following approach is how I implemented it.</p> <h2>index.html</h2> <pre><code><webview src="http://website.com" style="width:1010px; height:700px"></webview> </code></pre> <h2>background.js</h2> <p>The code you have here looks correct.</p> <h2>index.js</h2> <p>I approached this in a slightly different way by using the <code>window.onresize</code> event to handle the resize. Please keep in mind that resize event is fired after the screen has been resized and may seem to create a slightly laggy feel.</p> <pre><code>window.onresize = setWebview; function setWebview() { var webview = document.querySelector('webview'); var webviewWidth = document.documentElement.clientWidth; var webviewHeight = document.documentElement.clientHeight; webview.style.width = webviewWidth + 'px'; webview.style.height = webviewHeight + 'px'; } </code></pre> <p>I also call the <code>setWebview();</code> function in the onLoad or something of the sorts for the initial setting of the webview.</p> <p>So that is my approach, looking at your index.js I think you may be having an issue in that you are trying to set the width and height of the <code><webview></code> when in fact you need to be setting the style width and height, so maybe the following would have worked;</p> <pre><code>$('webview').get(0).style.width = $(window).width(); $('webview').get(0).style.height = $(window).height(); </code></pre> <p>Notice that I added in <code>.style</code> before <code>.width</code> and <code>.height</code></p> <p>Hope that helps..</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload