Html code stopped loading

I have looked through the threads on the forum. none of the options work. in the summer everything worked well. but now the application just closes if you insert the html code into the webvier. options that I tried and which do not work now





I repeat, everything worked fine in the summer. also now it is impossible to view in the emulator how the html file looks in webvier, can only be viewed in a compiled apk

2 Likes

I am facing issue only with html block.

1 Like

Try to use customwebview extension

1 Like

yes read. Nothing happens. White screen

Could you post yout html here to test it ?

<!DOCTYPE html>
<html lang="ru" prefix="og: http://ogp.me/ns#">
<head>
    
   
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-N7Q2VTH');</script>
    <!-- End Google Tag Manager -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83097307-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-83097307-1');
    </script>
    <script data-ad-client="ca-pub-6348125197752812" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7Q2VTH" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div class="paint-filed" id="paint-field">
        <div id="raster-stack" class="wrap raster-stack"></div>
        <svg id="svg"></svg>
        <div id="draw-cursor" class="draw-cursor"></div>
    </div>
    <div class="mobile-background">
        <svg width="100%" height="100%">
        <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#transparent)"></rect>
        <rect id="mobileBackground" shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="#fff"></rect>
        </svg>
    </div>
    <div class="wrapper" id="wrapper">
        <div class="palette">
        <header class="header">
            
        </header>
        <div class="color-picker" id="colorPicker">
            <svg class="color-picker-background">
                <defs>
                    <linearGradient id="color-gradient-black" x1="0%" x2="0%" y1="0%" y2="100%">
                        <stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="0"></stop>
                        <stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"></stop>
                    </linearGradient>
                    <linearGradient id="color-gradient-white" x1="0%" x2="100%" y1="0%" y2="0%">
                        <stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="1"></stop>
                        <stop offset="100%" stop-color="rgb(255,255,255)" stop-opacity="0"></stop>
                    </linearGradient>
                </defs>
                <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="#f00" id="color-picker-tone"></rect>
                <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#color-gradient-white)"></rect>
                <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#color-gradient-black)"></rect>
            </svg>
            <svg class="cursor-svg">
                <circle id="colorPickerCursor" class="cursor" cx="0" cy="0" r="6" stroke="#404040" stroke-width="2" fill="none"></circle>
            </svg>
        </div>
        <div class="tone-picker" id="tonePicker">
            <svg class="tone-picker-background">
                <defs>
                <linearGradient id="tone-gradient-vertical" x1="0%" x2="0%" y1="0%" y2="100%">
                    <stop offset="0%" stop-color="rgb(255,0,0)" stop-opacity="1"></stop>
                    <stop offset="16.6%" stop-color="rgb(255,0,255)" stop-opacity="1"></stop>
                    <stop offset="33.2%" stop-color="rgb(0,0,255)" stop-opacity="1"></stop>
                    <stop offset="49.8%" stop-color="rgb(0,255,255)" stop-opacity="1"></stop>
                    <stop offset="66.4%" stop-color="rgb(0,255,0)" stop-opacity="1"></stop>
                    <stop offset="83%" stop-color="rgb(255,255,0)" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="rgb(255,0,0)" stop-opacity="1"></stop>
                </linearGradient>
                </defs>
                <defs>
                    <linearGradient id="tone-gradient-horizontal" x1="0%" x2="100%" y1="0%" y2="0%">
                        <stop offset="0%" stop-color="rgb(255,0,0)" stop-opacity="1"></stop>
                        <stop offset="16.6%" stop-color="rgb(255,0,255)" stop-opacity="1"></stop>
                        <stop offset="33.2%" stop-color="rgb(0,0,255)" stop-opacity="1"></stop>
                        <stop offset="49.8%" stop-color="rgb(0,255,255)" stop-opacity="1"></stop>
                        <stop offset="66.4%" stop-color="rgb(0,255,0)" stop-opacity="1"></stop>
                        <stop offset="83%" stop-color="rgb(255,255,0)" stop-opacity="1"></stop>
                        <stop offset="100%" stop-color="rgb(255,0,0)" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
                <rect class="tone-gradient-vertical" shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#tone-gradient-vertical)"></rect>
                <rect class="tone-gradient-horizontal" shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#tone-gradient-horizontal)"></rect>
            </svg>
            <svg class="cursor-svg">
                <g id="tonePickerCursor" class="cursor">
                    <rect class="tone-picker-cursor-vertical" id="tonePickerCursorVertical" x="-2%" y="-3px" rx="3px" ry="3px" width="104%" height="6px" fill="none" stroke="#f5f5f5" stroke-width="2"></rect>
                    <rect class="tone-picker-cursor-horizontal" id="tonePickerCursorHorizontal" x="-3px" y="-2%" rx="3px" ry="3px" width="6px" height="104%" fill="none" stroke="#f5f5f5" stroke-width="2"></rect>
                </g>
            </svg>
        </div>
        <div class="info" id="info">
            <div class="inputs-wrapper">
                <svg class="color-preview" id="colorPreview">
                    <defs></defs>
                    <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#transparent)"></rect>
                    <rect shape-rendering="crispEdges" id="rectColor" x="0" y="0" width=100% height=100% fill="rgb(255, 255, 255)"></rect>
                </svg>
            <div class="inputs">
                <div class="select-wrapper">
                    <div class="select-substitute" id="mobileColorModelSelectSubstitude">HEX</div>
                    <select class="mobile-color-model-select" id="mobileColorModelSelect" name="mobileColorModelSelect">
                        <option>HEX</option>
                        <option>RGB</option>
                        <option>RGB %</option>
                        <option>HSV</option>
                        <option>CMYK</option>
                    </select>
                </div>
                <label for="hexInput" class="caption">HEX</label>
                <div class="hex-wrapper selected" id="hex-wrapper">
                    <div class="lattice">#</div>
                        <input type="text" id="hexInput" class="selected" value="fff" />
                    </div>
                    <label class="caption" for="rgbInput">RGB</label>
                    <div class="rgb-wrapper" id="rgb-wrapper">
                        <input type="text" id="rgbInput" value="255, 255, 255" />
                        <div class="line"></div>
                        <input type="text" id="rgbPercentageInput" value="1, 1, 1" />
                    </div>
                    <label for="hsvInput" class="caption">HSV</label>
                    <input type="text" id="hsvInput" value="0, 0, 100" />
                    <label for="cmykInput" class="caption">CMYK</label>
                    <input type="text" id="cmykInput" value="0, 0, 0, 0" />
                </div>
            </div>
            <!-- <div class="donate-btn" id="donate-btn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="19" height="19" fill="#ffffff">
                    <path d="M 4 4 A 2 2 0 0 0 3.6132812 4.0390625 C 3.602689 4.0411905 3.5925658 4.0445769 3.5820312 4.046875 A 2 2 0 0 0 2 6 L 2 18 A 2 2 0 0 0 2.0390625 18.386719 C 2.0411905 18.397311 2.0445769 18.407434 2.046875 18.417969 A 2 2 0 0 0 4 20 L 26 20 A 2 2 0 0 0 26.386719 19.960938 C 26.397311 19.95881 26.407434 19.955423 26.417969 19.953125 A 2 2 0 0 0 28 18 L 28 6 A 2 2 0 0 0 27.960938 5.6132812 C 27.95881 5.602689 27.955423 5.5925658 27.953125 5.5820312 A 2 2 0 0 0 26 4 L 4 4 z M 6 6 L 24 6 A 2 2 0 0 0 26 8 L 26 16 A 2 2 0 0 0 24 18 L 6 18 A 2 2 0 0 0 4 16 L 4 8 A 2 2 0 0 0 6 6 z M 15 8 C 12.791 8 11 10.015 11 12.5 C 11 13.922 11.597672 15.175 12.513672 16 L 17.486328 16 C 18.402328 15.175 19 13.922 19 12.5 C 19 10.015 17.209 8 15 8 z M 7 11 A 1 1 0 0 0 6 12 A 1 1 0 0 0 7 13 A 1 1 0 0 0 8 12 A 1 1 0 0 0 7 11 z M 23 11 A 1 1 0 0 0 22 12 A 1 1 0 0 0 23 13 A 1 1 0 0 0 24 12 A 1 1 0 0 0 23 11 z M 25.984375 21.986328 A 1.0001 1.0001 0 0 0 25.839844 22 L 25 22 L 25 23 L 25 24 C 24.161287 24 23.445653 24.516349 23.148438 25.248047 C 22.192866 24.892189 20.997093 24.471983 19.449219 24.037109 C 15.816625 23.016539 10.602564 22 4 22 A 1.0001 1.0001 0 1 0 4 24 C 10.397436 24 15.422047 24.983461 18.908203 25.962891 C 20.651281 26.452605 22.007411 26.940631 22.966797 27.308594 C 23.44649 27.492575 23.826484 27.646222 24.117188 27.759766 C 24.262539 27.816536 24.383033 27.862847 24.5 27.902344 C 24.602773 27.937047 24.672714 27.980779 24.917969 27.992188 C 24.945832 27.994703 24.971841 28.009766 25 28.009766 C 26.076132 28.009766 26.936821 27.158992 26.990234 26.101562 A 1.0001 1.0001 0 0 0 27 25.960938 L 27 24 L 27 23 L 27 22 L 26.154297 22 A 1.0001 1.0001 0 0 0 25.984375 21.986328 z"/>
                </svg>
                Поддержать
            </div> -->
        </div>
        <div class="alpha-picker" id="alphaPicker">
            <svg class="alpha-picker-background">
                <defs>
                    <linearGradient id="color-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
                        <stop id="transparentGradientColorStart" offset="0%" stop-color="rgb(255,255,255)" stop-opacity="0"></stop>
                        <stop id="transparentGradientColorEnd" offset="100%" stop-color="rgb(255,255,255)" stop-opacity="1"></stop>
                    </linearGradient>
                    <pattern id="transparent" width="20" height="20" patternUnits="userSpaceOnUse">
                        <rect class="transparent-fill" shape-rendering="geometricPrecision" x="0" y="0" width="10" height="10"></rect>
                        <rect class="transparent-fill" shape-rendering="geometricPrecision" x="10" y="10" width="10" height="10"></rect>
                        <rect class="transparent-white" shape-rendering="geometricPrecision" x="10" y="0" width="10" height="10" fill="white"></rect>
                        <rect class="transparent-white" shape-rendering="geometricPrecision" x="0" y="10" width="10" height="10" fill="white"></rect>
                    </pattern>
                </defs>
                <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#transparent)"></rect>
                <rect shape-rendering="crispEdges" x="0" y="0" width=100% height=100% fill="url(#color-gradient)" style="border-radius: 10px;overflow: hidden;"></rect>
            </svg>
            <svg class="cursor-svg">
                <rect id="alphaPickerCursor" class="cursor" x="0" y="-2%" rx="3" ry="3" width="6px" height="104%" stroke="#404040" stroke-width="2px" fill="none"></rect>
            </svg>
        </div>
            <div class="theme-switcher" id="themeSwitcher">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/><path d="M0 0h24v24H0z" fill="none"/>
                </svg>
            </div>
            <div class="tools">
                <div class="dwnld-btn" id="dwnld-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
                        <path fill="none" d="M0 0h24v24H0V0z"/><path d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71zM5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1z"/>
                    </svg>
                </div>
                <!-- <a href="https://www.instagram.com/avo1kov/" class="author-link" id="insta-link" target="_new" onclick="dataLayer.push({'event':'instagram-link-click'});">@avo1kov</a> -->
                <a href="https://gitlab.com/avo1kov/csscolor" class="author-link" id="insta-link" target="_new">GitLab</a>
            </div>
            <div class="example-text" id="exampleText" contenteditable="true">
                Большим горшком <b>воду</b> не носят.            </div>
            <div class="languages">
            </div>
            <article class="article">
                <div class="repository-info">
                    
                </div>
                <!-- Yandex.RTB R-A-335771-2 -->
    <div id="yandex_rtb_R-A-335771-2"></div>
    <script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Context.AdvManager.render({
                    blockId: "R-A-335771-2",
                    renderTo: "yandex_rtb_R-A-335771-2",
                    async: true
                });
            });
            t = d.getElementsByTagName("script")[0];
            s = d.createElement("script");
            s.type = "text/javascript";
            s.src = "//an.yandex.ru/system/context.js";
            s.async = true;
            t.parentNode.insertBefore(s, t);
        })(this, this.document, "yandexContextAsyncCallbacks");
    </script>
                
            </article>
            <!-- <div class="comments">
                Hello
            </div> -->
            <div class='footer'>
                <div class='center'>
                    2021                    &copy;
                    <a href="" class="content" id="linkToMe" target="_new" onclick="dataLayer.push({'event':'footer-link-click'});">
                    </a>
                </div>
            </div>
        </div>
        <div class="dark-bckgr" id="dark-bckgr"></div>
        <div class="dwnld-popup" id="dwnld-popup">
            <div class="popup">
                <svg class="dwnld-trnsprnt">
                    <rect shape-rendering="crispEdges" x="0" y="0" rx="3px" ry="3px" width=100% height=100% fill="url(#transparent)"></rect>
                </svg>
                <div class="rect" id="rect">
                    <input type="number" id="img-width" placeholder="256" min="1" max="7680">
                    ✕
                    <input type="number" id="img-height" placeholder="256" min="1" max="4320">
                </div>
                <div class="btns">
                    <div class="btn cancel" id="dwnld-cancel">Отмена</div>
                    <div class="dwnld-btns">
                        <a href="#" class="btn download-btn" id="gif-link">.gif</a>
                        <a href="#" class="btn download-btn" id="jpg-link">.jpg</a>
                        <a href="#" class="btn download-btn" id="png-link">.png</a>
                        <a href="#" class="btn download-btn" id="svg-link">.svg</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="donate-popup" id="donate-popup">
            <div class="popup">
                <h2>Поддержите нас. Это важно</h2>
                <iframe src="https://money.yandex.ru/quickpay/shop-widget?writer=seller&targets=%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0%20%D0%BF%D0%B0%D0%BB%D0%B8%D1%82%D1%80%D1%8B&targets-hint=&default-sum=100&button-text=13&hint=&successURL=&quickpay=shop&account=410013246801384" width="423" height="222" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    <div style="text-align: right">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="HRPUL3XJYGQ98" />
            <input type="image" src="https://www.paypalobjects.com/ru_RU/RU/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Кнопка «Пожертвовать через PayPal»" />
            <img alt="" border="0" src="https://www.paypal.com/ru_RU/i/scr/pixel.gif" width="1" height="1" />
        </form>
    </div>
            </div>
        </div> -->
    </div>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript" >
        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
            m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

        ym(27027039, "init", {
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true
        });
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/27027039" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    <!-- /Yandex.Metrika counter -->
<script type="text/javascript" src="https://csscolor.ru/app.bundle.js?b9dd55b1a233973a6fb2"></script></body>
</html>

in summer this code displayed fine in webvier

You could save html to assets and load from there to work with companion

http://localhost/html.html

Try

htmltest.aia (6.3 KB)

that doesn’t suit me. I am creating an html editor application.
this is my first version of the editor, as you can see it works fine.
HTML Редактор.apk (5.3 MB)
but after updating Kodular Fenix webvier no longer works as before. I cannot update the application.

but thanks anyway for wanting to help me, I appreciate it

1 Like

You could try this extension, which builds a physical html file from text blocks and displays it in a webviewer:

6 Likes

Thank you very much. it helped me

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.