如何注入css在webbrowser控件

html-css08

如何注入css在webbrowser控件,第1张

我已经试过这个:

string newScript = textBox1.Text

HtmlElement head = browserCtrl.Document.getElementsByTagName_r("head")[0]

HtmlElement scriptEl = browserCtrl.document.create_rElement_x_x("script")

lblStatus.Text = scriptEl.GetType().ToString()

scriptEl.SetAttribute("type", "text/javascript")

head.A(scriptEl)

scriptEl.InnerHtml = "function sayHello() { alert('hello') }"

scriptEl.InnerHtml和scriptEl.InnerText都给出了错误:

Property is not supported on this type of HtmlElement.

at System.Windows.Forms.HtmlElement.set_InnerHtml(String value)

at SForceApp.Form1.button1_Click(Object sender, EventArgs e) in d:\jsight\installs\SForceApp\SForceApp\Form1.cs:line 31

at System.Windows.Forms.Control.OnClick(EventArgs e)

at System.Windows.Forms.Button.OnClick(EventArgs e)

at System.Windows.Forms.Button.OnMouseUp(MouseEventArgs mevent)

at System.Windows.Forms.Control.WmMouseUp(Message&m, MouseButtons button, Int32 clicks)

at System.Windows.Forms.Control.WndProc(Message&m)

at System.Windows.Forms.ButtonBase.WndProc(Message&m)

at System.Windows.Forms.Button.WndProc(Message&m)

at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message&m)

at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message&m)

at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

有没有一个简单的方法在dom中写入脚本?

dom-文档对象模型

答案:

因为某些原因,Richard的解决方案在结束之前没有工作(insertAdjacentText引发了一个异常,失败了)。不管怎么样,它们似乎是这么工作的:

HtmlElement head = webBrowser1.Document.getElementsByTagName_r("head")[0]

HtmlElement scriptEl = webBrowser1.document.create_rElement_x_x("script")

IHTMLScriptElement element = (IHTMLScriptElement)scriptEl.DomElement

element.text = "function sayHello() { alert('hello') }"

head.A(scriptEl)

webBrowser1.Document.InvokeScript("sayHello")

一种新的 CSS 注入机制意味着在生产环境中更快的客户端渲染,同时流式服务器端渲染使得首字节时间(TTFB)更快。

CSS注入早就不是什么新鲜事了。早在一年半以前,Sunil Pai就发现了一个鲜为人知的DOM API: insertRule 。它使我们能用JS的方式把CSS快速注入到DOM当中。唯一的缺点是这些样式不能在浏览器的开发者工具中编辑。

当 Glen 和 Max 第一次写出styled-components的时候,他们完全是从开发者的体验出发的。对于小型应用来说性能问题还不明显,所以他们决定不再使用 insertRule 。但是当越来越多的人开始使用,并且使用在大型应用程序中时,样式注入就成了瓶颈,特别对于一些高度动态的案例来说。

多亏了 Reddit 的前端工程师 Ryan Schwers,styled-components 3.1.0版本在生产环境中默认使用 insertRule 。

我们将该版本与之前的版本(3.0.2)做了些对比,结果远超预期:

Mount的时间减少了将近10倍,而重新渲染的时间减少了将近20倍!

注意,这样的比较是基于压力测试,不一定适用于真实应用。可能你的应用渲染速度不一定能提升10倍,但是在我们的一个应用中,首次渲染时间减少了好几百毫秒。

下图是styled-components与其它一些主流的React CSS-in-JS框架的比较(淡红色是3.0.2版本,深红色是3.1.0版本):

尽管目前styled-components还不是最快的,但比最快的也慢不了多少,至少之前的瓶颈也已经不复存在了。这样的结果实在是鼓舞人心,我们也非常希望得到各位用户的反馈。

流式服务器端渲染的概念实在React V16中引进的。它允许React还在渲染的时候,服务端仍然能发送HTML,这使得首字节时间更快,并且Node服务器能更容易的处理背压(Back-pressure)。

这与 CSS-in-JS 不太搭:

通常,我们在React完成渲染后,将所有组件的样式放在 <style>标签中,然后插入到 <head>里面。而在流式情况下,在任何组件都没被渲染的时候, <head>已经发送给用户了,这时候我们就无法插入任何东西了。

解决方案就是在渲染组件的时候,把HTML和样式混在一起,而不是等到最后,一次性的插入所有的组件。但是这样会使HTML和 style 标签都糅杂在一起,所以我们最后还是要在重注入(rehydration)之前把所有的 style 都合并到 head 里面。

我们已经实现了这一点,你现在可以同时使用流式服务器端渲染和styled-components。就像这样:

然后在客户端,我们必须调用 consolidateStreamedStyles() API来为React的重注入(rehydration)做准备: