在 WebBrowser 控件中适合 html 页面宽度

Question

我有很多本地 html 页面，我在我的应用程序的 WebBrowser 控件中打开这些页面。
我希望页面最初打开以适合控件的宽度，理想情况下在用户调整大小后更改其宽度以适合控件。
由于页面很多，我更喜欢c#，js或css解决方案，不需要修改html文件。
我到处搜索，尝试了数十种解决方案（其中很多都在 SO 上），但似乎没有任何效果。
赢 7、IE 11、VS 2022
提前致谢

Answer 1

由于您使用的是 Win7 和 IE11，我有预感您正在使用 WinForms。 可以通过 WebBrowser 控件的 Document 属性访问 DOM，我们可以在其中添加 CSS。将其放入您的WebBrowser.DocumentCompleted事件处理程序中：

webBrowser1.Document.Body.Style += ";width:100%;";

Style 属性就像一个 HTML style=属性，即由分号分隔的 CSS styles 的字符串。 附加的字符串以分号开头，以防现有的 styles 不以分号结尾。

对于 WPF，首先请参阅从 WebBrowser 访问 DOM 。 然后你可以把它放在你的WebBrowser.LoadCompleted事件处理程序中：

var document = webBrowser1.Document as mshtml.HTMLDocument;
document.body.style.width = '100%';

Answer 2

有几种方法可以在不修改 HTML 页面本身的情况下实现这一点。

使用 JavaScript：您可以将 JavaScript function 添加到 WebBrowser 控件的 DocumentCompleted 事件，以调整 HTML 页面的大小以适应控件的宽度。 以下是如何执行此操作的示例：

    private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    webBrowser1.Document.Body.Style = "zoom:100%";
}

上面的代码将 HTML 页面的主体的缩放级别设置为 100%，这将使其适合控件的宽度。 您还可以使用主体样式的“宽度”和“高度”属性将页面的宽度和高度设置为控件的大小。

使用 Css：您可以使用 css 来更改 WebBrowser 控件中 html 页面的宽度。 您可以创建一个 css 文件并将其包含在您的 html 文件中。

    body {
  width: 100%;
}

这会将主体的宽度设置为父容器的 100%，在本例中为 WebBrowser 控件。

使用 C#：您可以使用 WebBrowser 控件的 Resize 事件来更改 HTML 页面的大小以适应控件。 以下是如何执行此操作的示例：

    private void webBrowser1_Resize(object sender, EventArgs e)
{
    webBrowser1.Width = this.Width;
    webBrowser1.Height = this.Height;
}

此代码将 WebBrowser 控件的宽度和高度设置为父窗体/容器的宽度和高度。

值得注意的是，解决方案 1 和 3 可能会导致 HTML 页面的布局出现问题，因为该页面可能未设计为自动调整其大小。 如果您想以更简洁的方式更改 HTML 页面的大小，则解决方案 2 是最佳方法，因为它不太容易出错。

还值得注意的是，您可以结合上述解决方案以获得更好的结果。 您可以使用解决方案 2 将 HTML 页面的宽度设置为 100%，然后使用解决方案 3 调整 WebBrowser 控件的大小以适应父窗体/容器。

我希望这有帮助。 如果您还有其他问题，请告诉我。