Изменить стили CSS в веб-представлении

Question

Я загружаю страницу через веб-просмотр в NativeScript, мне нужно скрыть некоторые блоки элементов.Какая опция для вставки CSS в HTML я получил?Или каковы альтернативы?Я не нашел ответа на свой вопрос: c

page.xml // XML для отображения страницы

<GridLayout class="page-content">
        <Label row="1" text="{{ result }}" style="text-align:center; z-index:99" />
        <WebView row="2" loaded="onWebViewLoaded" id="myWebView" src="{{ webViewSrc }}"
            style="z-index:1">
        </WebView>
 </GridLayout> 

page.ts // Логика, в которой я хочу добавить стили

export function onDrawerButtonTap(args: EventData) {
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
}


export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("webViewSrc", "https://m.stoloto.ru/check?int=sitemap");
    vm.set("result", "");
    page.bindingContext = vm;
}
// handling WebView load finish event
export function onWebViewLoaded(webargs) {
    const page: Page = <Page>webargs.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView>webargs.object;
    vm.set("result", "Загрузка...");
    vm.set("enabled", false);

    webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
        let message = "";
        if (!args.error) {
        } else {
            message = `Ошибка загрузки, проверьте соединение с интернетом`;
        }

        vm.set("result", message);
    });
}
// going to the previous page if such is available
export function goBack(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView>page.getViewById("myWebView");
    if (webview.canGoBack) {
        webview.goBack();
        vm.set("enabled", true);
    }
}
// going forward if a page is available
export function goForward(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView>page.getViewById("myWebView");
    if (webview.canGoForward) {
        webview.goForward();
    } else {
        vm.set("enabled", false);
    }
}

Answer 1

Вы можете внедрить CSS, создав элемент Style через JavaScript после загрузки страницы.

const webView = <WebView>args.object,
    jsStr = `var parent = document.getElementsByTagName('head').item(0);
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = ".-bg-blue {background-color: red !important;}";
            parent.appendChild(style)`;

if (webView.ios) {
    webView.ios.evaluateJavaScriptCompletionHandler(jsStr,
        function (
            result,
            error
        ) {
            if (error) {
                console.log("error...");
            }
        });
} else if (webView.android) {
    // Works only on Android 19 and above
    webView.android.evaluateJavascript(
        jsStr,
        null
    );
}

Образец игровой площадки

Приведенный выше код превращает фоновый синий фон на https://www.nativescript.org/ в красный.