When loading the page in NativeScript using web viewing, I encountered a need to hide certain elements on the page. What is the best way to apply CSS styles to HTML elements in this scenario? Are there any alternatives that could be considered? I have been unable to find a satisfactory answer to my query.
page.xml // XML marking up the page structure
<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 // The TypeScript logic for applying styles
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", "Loading...");
vm.set("enabled", false);
webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
let message = "";
if (!args.error) {
} else {
message = `Error loading, please check your internet connection`;
}
vm.set("result", message);
});
}
// Navigating back to previous page
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);
}
}
// Navigating forward if possible
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);
}
}