Appcelerator-Q-A-banner

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 2 years ago by John B
1 Comment
  • Does anyone know how to stop Android going full screen for local files in iframes?

    — commented 2 years 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.