This is an android project and I need to load a website in a webview.
And one more request here is the website needs to be loaded in a iframe.
This is done by the following step:
- create a webview
- I have a sample html file
- I load my sample html file
- I call
wewbview.loadHTMLString(sampleHtmlString, "")
to load the site from string;
Sample html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<script>
document.addEventListener('touchstart', function(event) {
console.log("document touchstart");
});
</script>
</body>
</html>
And webview show all good on device also i can see touch event triggered.
Then I will add the iframe part:
- User input a url to load for example: “https://www.facebook.com”
- Still I load my sample html file
- Then I replace the PLACE HOLDER in sample file to the one user input for example:
"https://www.facebook.com"
- Then call
wewbview.loadHTMLString(sampleHtmlString, "")
;
Updated sample html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.webview-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="webview-container" id="webview-container">
</div>
<script>
function loadWebView(url) {
var iframe = document.createElement('iframe');
iframe.src = url;
document.getElementById('webview-container').innerHTML = '';
document.getElementById('webview-container').appendChild(iframe);
iframe.onload = function() {
console.log("iframe onload");
};
}
document.addEventListener('touchstart', function(event) {
console.log("document touchstart");
});
loadWebView('https://www.example.com');
</script>
</body>
</html>
I can see the site loaded in iframe correctly but this time touchstart not trigggered when touched.
I searched few posts then tried:
function loadWebView(url) {
var iframe = document.createElement('iframe');
iframe.src = url;
document.getElementById('webview-container').innerHTML = '';
document.getElementById('webview-container').appendChild(iframe);
iframe.onload = function() {
console.log("iframe onload");
iframe.contentWindow.document.addEventListener('touchstart', function(event) {
console.log("iframe touchstart");
});
};
}
But still not working and I am getting the error in console:
Uncaught SecurityError: Failed to read a named property 'document' from 'Window':
Blocked a frame with origin "null" from accessing a frame with origin
"https://www.grandbrowser.com".
The frame requesting access has a protocol of "about",
the frame being accessed has a protocol of "https".
Protocols must match.", source: about:blank (41)
I also tried to remove the "https:"
from the url according to this post:
But then the error in console is gone but the site will not load anymore.
Any advice on this issue will be appreciated, thanks in advance.