NXP

GeckoFx (2)向已加载的页面中注入 css 和 js

2019-07-12 13:04发布

站内文章 / NXP MCU
10688 0 1701
向已加载的页面中注入js、css，在页面加载完后执行自定义的脚本,点击页面元素展示修改元素的边框颜 {MOD}。
使用 browser_Load 事件在页面加载完成时注入脚本。
使用 DomClick 事件，修改触发元素的样式。
初始化组件： public void InitFrm() { this.WindowState = FormWindowState.Maximized; Xpcom.Initialize(xulrunnerPath); browser = new Gecko.GeckoWebBrowser(); browser.Parent = this; browser.Dock = DockStyle.Fill; browser.Navigate("http://blog.csdn.net/xxj_jing"); panelBottom.Height = 300; browser.Load += browser_Load; browser.DomClick += browser_DomClick; } private bool _load = false; /// /// 加载文档 /// /// /// void browser_Load(object sender, DomEventArgs e) { if (!_load) { InjectCss(browser.Document); InjectJs(browser.Document); } if (!_load) _load = true; } /// /// 注入样式 /// public void InjectCss(GeckoDomDocument doc) { var css = doc.CreateHtmlElement("style"); css.InnerHtml = @" .firefinder-match-red {outline: 2px dashed #f00 !important;} .firefinder-match-blue {outline: 2px dashed #00f !important;}"; browser.Document.Head.AppendChild(css); } /// /// 注入脚本 /// public void InjectJs(GeckoDomDocument doc) { var js = doc.CreateHtmlElement("script"); js.InnerHtml = "alert(1);"; browser.Document.Head.AppendChild(js); } /// /// 文档单击事件 /// /// /// void browser_DomClick(object sender, DomMouseEventArgs e) { var ele = e.CurrentTarget.CastToGeckoElement(); ele = e.Target.CastToGeckoElement(); AddClass("firefinder-match-red", ele); } /// /// 添加样式 /// public void AddClass(string className,params GeckoElement[] element) { if (element != null && element.Length > 0) { element.All(x => { if (x == null) return true; var cls = x.GetAttribute("class"); cls += " " + className; x.SetAttribute("class", cls); return true; }); } } /// /// 移除样式 /// public void RemoveClass(string className, params GeckoElement[] element) { if (element != null && element.Length>0) { element.All(x => { if (x == null) return true; var cls = x.GetAttribute("class"); if (!string.IsNullOrWhiteSpace(cls)) { cls = cls.Replace(className, "").Trim(); x.SetAttribute("class", cls); } return true; }); } }

热门文章