个人中心
gpt4 book ai didi

javascript - React Native iOS WebView在本地html中执行javascript标签

转载 作者：行者123 更新时间：2023-12-01 22:00:29 25 4
gpt4 key购买 nike

我正在尝试使用 react-native-webview 和本地 html 文件显示网页。但它在 iOS 平台不执行 html 文件中的 javascript 标签，但适用于 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 上显示的内容。

最佳答案

我没有设置 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 专家，但我认为您可能需要在应用 list 中添加一些内容以允许 HTTPS 调用正常工作。也许其中一个脚本包含在后台进行 http 调用。如果您仔细查看日志，您将看到错误或警告。

也许这个？
iOS 模拟器 > 菜单栏 > 调试 > 打开系统日志

关于javascript - React Native iOS WebView在本地html中执行javascript标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60155136/

25 4 0
文章推荐： ios - 快速更改某些 tableView 单元格中的单元格背景颜色
文章推荐： go - 在Go中将文件从本地文件夹移动到s3存储桶
文章推荐： reactjs - Dockerize React应用程序和Go API-代理问题
文章推荐： ios - 将 .environmentObject 与呈现为工作表的 View 一起使用会导致 onReceive 不触发/与 @EnvironmentObject 冲突
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com