Using iframe to display local html files without going full screen via webview on Android

You must Login before you can answer or comment on any questions.

Hi, seems like a simple problem but... When using a webview with Android 4 to load a local html file containing an iframe I'm getting different results depending on the source of the src url. Loading a local html file in the iframe takes over the whole screen whereas loading it from a remote source works fine.

<html>
<head>
</head>
<body>
Some text
<iframe src="content/file.html" width="100" height="100"></iframe>
</body>
</html>
Takes over the whole screen
<html>
<head>
</head>
<body>
Some text
<iframe src="http://www.example.com/file.html" width="100" height="100"></iframe>
</body>
</html>
Displays fine as part of the parent page
<html>
<head>
</head>
<body>
Some text
<iframe src="" width="100" height="100"></iframe>
</body>
</html>
Also displays fine as part of the parent page.

This issue only seems to manifest itself when src is set to a local html file. Also tried using JS to update the src after parent has loaded which causes iframe to go full screen.

Also tried prefixing with file:///, file://, app://, etc without success.

As I said it's probably obvious, but any help would be gratefully received.

Thanks

— asked 1 year ago by John B
1 Comment
  • Does anyone know how to stop Android going full screen for local files in iframes?

    — commented 1 year ago by John B

1 Answer

okay, the only solution that I have been able to find to stop local files going full screen within in an iframe is to use a div instead and use jquery to load the file via ajax. For remote files you still need to use an iframe otherwise you'll run into cross domain issues with JS.

<html>
<head>
</head>
<body>
Some text
<div id="iframediv"></div>
</body>
</html>
$.ajax({type: "POST",url:"content/file.html",dataType:"html",success: function(data) {$('#iframediv').html(data);}});
By using jquery .ajax instead of .load means any JS in file.html is processed too. See http://api.jquery.com/jQuery.ajax/ for more details.

Your Answer

This question has been locked and cannot accept new answers.