Android Webview touch event not trigged in iframe

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:

  1. create a webview
  2. I have a sample html file
  3. I load my sample html file
  4. 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:

  1. User input a url to load for example: “https://www.facebook.com”
  2. Still I load my sample html file
  3. Then I replace the PLACE HOLDER in sample file to the one user input for example: "https://www.facebook.com"
  4. 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:

The frame requesting access has a protocol of “https”, the frame being accessed has a protocol of “http”. Protocols must match

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.