typescript - 在 webview 中更改 css 样式
问题描述
我通过 NativeScript 中的网页查看加载页面,我需要隐藏一些元素块。在我收到的 html 中插入 css 的选项是什么?或者有什么替代方案?我没有找到我的问题的答案: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);
}
}
解决方案
您可以在页面加载后通过 JavaScript 创建样式元素来注入 CSS。
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/的背景蓝色背景变为红色。
推荐阅读
- sql - 交易的最短日期
- r - 在 ggplot 中使用 plotly - alpha 参数抛出错误
- arrays - 如何对 Couchbase 数组索引进行聚合查询?
- python - 使用 Python 在 Ursina Engine 中跳跃时如何更改玩家实体的纹理?
- netcobol - Fujitsu Netcobol Cobol 程序删除文件或记录
- angular - 如何使用 Angular DevTools 查找组件名称?
- excel - 循环时附加到数组
- node.js - 如何防止节点进程因反复 TLS 握手失败而崩溃?
- php - 在 Laravel 8 中刷新后重复数据
- macos - .Net 5 是否支持在 Mac 平台上播放/制作声音的任何方式?