React Native iOS WebView выполняет тег javascript в локальном html - PullRequest
Новая
       16

React Native iOS WebView выполняет тег javascript в локальном html

1 голос
/ 10 февраля 2020

Я пытаюсь показать веб-страницу с реагировать-родной-веб-просмотр с локальным html файлом. Но он не выполняет теги javascript в файле html на платформе iOS, а работает на Android.

Как я могу это исправить?

Это кодовый чип, который я использую WebView. 

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

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

Вот файл ep-home2. js. 

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/lodash@4.17.15/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>
    `;
    };

Выше я пытаюсь отобразить на iOS.

1 Ответ

1 голос
/ 14 февраля 2020

У меня не настроена среда сборки iOS, поэтому я собираюсь дать вам кое-что попробовать.

Вам нужно сделать пример импорта меньшего размера (вместо ep-home2. js), который проверяет три вещи, В ЭТОМ ПОРЯДКЕ: 

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>`;
};

Я предполагаю, что 1 и 2 будут работать. Я не эксперт в iOS, но я думаю, что вам может понадобиться добавить что-то в манифест приложения, чтобы разрешить вызовы HTTPS. Возможно, один из скриптов включает в себя http-вызов в фоновом режиме. Если вы внимательно посмотрите журналы, вы увидите ошибку или предупреждение.

Может быть, это? iOS Симулятор> Строка меню> Отладка> Открыть системный журнал

...