React Native iOS WebView execute javascript tag in local html

Question

I am trying to show web page with react-native-webview with local html file. But it doesn't execute javascript tags in html file at the iOS platform, but works on Android.

How I can fix it?

This is a codechip which I am using the WebView.

...  
const html = require('./ep-home2')();  
...  

<WebView
   originWhitelist={['*']}
   ref={this.webview}
   source={{html: html}}
/>

Here is ep-home2.js file.

module.exports = function() {
      return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <title>SADAD</title>
        <!-- loader icon -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video-js.min.css" integrity="sha256-kflKPH4F0cGv0BJg6I6+pb5nIO01FMeoK7qWoz1NayE=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/easy-autocomplete.min.css">

        <style>

          body {
              opacity: 0;
          }

          body.all-loaded {
              opacity: 1;
          }
            html {
                touch-action: manipulation;
            }

            /*body {background: #FFFFFF;}*/
            .con {
                display: block;
            }
            .preloader p {
              color: #fff;
              padding-top: 20px;
            }

            .fade-in {
              animation: fadeIn ease 250ms;
            }
            @keyframes fadeIn {
              0% {
                opacity:0;
              }
              100% {
                opacity:1;
              }
            }
        </style>

        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/circle.css">
        <link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/animation.css">
    </head>
    <body>

        <span id="status" class="status" style="display: none"></span>

    <div class="main-containers" style="top: 0; position: relative;overflow-x: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);">
    </div>

        <script type="application/javascript">

            // Create Base64 Object
            var Base64 = {

                _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",


                encode: function(input) {
                    var output = "";
                    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                    var i = 0;

                    input = Base64._utf8_encode(input);

                    while (i < input.length) {

                        chr1 = input.charCodeAt(i++);
                        chr2 = input.charCodeAt(i++);
                        chr3 = input.charCodeAt(i++);

                        enc1 = chr1 >> 2;
                        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                        enc4 = chr3 & 63;

                        if (isNaN(chr2)) {
                            enc3 = enc4 = 64;
                        } else if (isNaN(chr3)) {
                            enc4 = 64;
                        }

                        output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

                    }

                    return output;
                },


                decode: function(input) {
                    var output = "";
                    var chr1, chr2, chr3;
                    var enc1, enc2, enc3, enc4;
                    var i = 0;

                    input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, "");

                    while (i < input.length) {

                        enc1 = this._keyStr.indexOf(input.charAt(i++));
                        enc2 = this._keyStr.indexOf(input.charAt(i++));
                        enc3 = this._keyStr.indexOf(input.charAt(i++));
                        enc4 = this._keyStr.indexOf(input.charAt(i++));

                        chr1 = (enc1 << 2) | (enc2 >> 4);
                        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                        chr3 = ((enc3 & 3) << 6) | enc4;

                        output = output + String.fromCharCode(chr1);

                        if (enc3 != 64) {
                            output = output + String.fromCharCode(chr2);
                        }
                        if (enc4 != 64) {
                            output = output + String.fromCharCode(chr3);
                        }

                    }

                    output = Base64._utf8_decode(output);

                    return output;

                },

                _utf8_encode: function(string) {
                    string = string.replace(/\\r\\n/g, "\\n");
                    var utftext = "";

                    for (var n = 0; n < string.length; n++) {

                        var c = string.charCodeAt(n);

                        if (c < 128) {
                            utftext += String.fromCharCode(c);
                        }
                        else if ((c > 127) && (c < 2048)) {
                            utftext += String.fromCharCode((c >> 6) | 192);
                            utftext += String.fromCharCode((c & 63) | 128);
                        }
                        else {
                            utftext += String.fromCharCode((c >> 12) | 224);
                            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                            utftext += String.fromCharCode((c & 63) | 128);
                        }

                    }

                    return utftext;
                },

                _utf8_decode: function(utftext) {
                    var string = "";
                    var i = 0;
                    var c = 0;
                    var c1 = 0;
                    var c2 = 0;
                    var c3 = 0;

                    while (i < utftext.length) {

                        c = utftext.charCodeAt(i);

                        if (c < 128) {
                            string += String.fromCharCode(c);
                            i++;
                        }
                        else if ((c > 191) && (c < 224)) {
                            c2 = utftext.charCodeAt(i + 1);
                            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                            i += 2;
                        }
                        else {
                            c2 = utftext.charCodeAt(i + 1);
                            c3 = utftext.charCodeAt(i + 2);
                            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                            i += 3;
                        }

                    }

                    return string;
                }

            }

        </script>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.7.0/pubsub.min.js" integrity="sha256-QF0bsKIv/J8eC1vj+f/xSmLSME+ztgCsUVYSR6hdHjE=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js" integrity="sha256-DDYBI87lVdSZOudgc6hh30NBPNzbLZqxBOwwmicNeB0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"></script>
        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/jsonform.js"></script>
        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/js/jsonform/2.1.5/jsv.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" integrity="sha256-gAx3c/BXS1tVc72JrzzIsPxrs2jW+96PfM+Xwwvb9pk=" crossorigin="anonymous"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.3/async.min.js"></script>

        <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/bcc-main-multi-layout-post-message-bypass.js"></script>


        <script>
            function keyboardShown() {
                jQuery('.activecampaign .hidable').addClass('hidden');
                //Move it 6p
                let tl1 = gsap.to(".logo", {duration: .25, marginTop: "1vh", scale: .55});
                let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 0, display: "none"});   
            }

            function keyboardHidden() {
                jQuery('.activecampaign .hidable').removeClass('hidden');
                let tl2 = gsap.to(".logo", {duration: .25, marginTop: "7vh", scale:.95});
                let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 1, display: "block"})

            }

        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js" integrity="sha256-cWzRia+bxBCmFQv+ZjhTVz95Q5VcDIQAWiiZvaRBDeQ=" crossorigin="anonymous"></script>-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.11/jspdf.plugin.autotable.min.js" integrity="sha256-k9mQGbAO6sNi3ZtGGmZBOK8/00BJZQ5H2FyWfI3/3SA=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha256-aS5HnZXPFUnMTBhNEiZ+fKMsekyUqwm30faj/Qh/gIA=" crossorigin="anonymous"></script>        

         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
         <script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/grnAnimation2.js"></script>

       <script>

         $(document).ready(function() {
            $("body").addClass('all-loaded');
        });
        </script>



    </body>
    </html>
    `;
    };

Above is what I am trying to display on iOS.

Where is your <webview /> code? Have you looked for errors (build and runtime)? Run in debug? How about posting a more concise example? eg use smaller HTML and don't require() it, just use a locally declared string. — Michael Ribbons
– Michael Ribbons, Commented Feb 10, 2020 at 21:24
@MichaelRibbons Just updated the description. I tried to run it and it works without error. just shows blank screen in iOS while shows correctly in Android. — heltdev
– heltdev, Commented Feb 13, 2020 at 16:38
if my answer helped please provide some detail so I can improve it for other people with similar queries. — Michael Ribbons
– Michael Ribbons, Commented Feb 16, 2020 at 21:23

Michael Ribbons · Accepted Answer · 2020-02-15 04:33:09Z

I don't have an iOS build environment set up so I'm going to give you things to try.

You need to make a smaller import example (instead of ep-home2.js) that tests three things, IN THIS ORDER:

module.exports = function() {
      return `
    <html><body>
    <!-- 1. -->
    <div>Hi this is raw HTML</div> 
    <!-- 2. -->
    <script>console.log("hi this is local js");</script> 
    <!-- 3. -->
    <script src="https://something.remote/lib.js"</script>
    <!-- where lib.js contains something simple like  -->
    console.log("Hi from lib.js");

</body></html>`;
};

My guess is that 1 and 2 will work. I'm not an expert at iOS, but I think you might need to add something to the app manifest to allow the HTTPS calls to work. Perhaps one of the script includes does an http call in the background. If you look carefully at the logs you will the error or warning.

Maybe this? iOS Simulator > Menu Bar > Debug > Open System Log

Collectives™ on Stack Overflow

React Native iOS WebView execute javascript tag in local html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related