Question

我在DesignMode中使用TWebBrowser（Doc.DesignMode：=＆＃39; On＆＃39;）来撰写HTML文档。在TWebBrowser中没有加载文档（磁盘上的HTML文件）。我直接在TWebBrowser中从零创建文档。 html代码将从TWebBrowser中提取并保存为c：/MyProjects/SomeHtmlName.html。

问题在于，如果它们具有相对路径，它就不会显示我插入的图像。

更准确地说，如果我将此代码粘贴到WebBrowser中，它将立即显示图像：

<IMG src="file:///c:/MyProjects/resources/R.PNG">

但是，如果我输入：

<IMG border=0 src="resources\R.PNG">
<IMG border=0 src="resources/R.PNG">   <---- preferred so it will work on Linux

它将显示图像占位符而不是实际图像。

我需要相对路径，因此如果我更改根路径或者如果我在FTP上传它，网站仍然可以工作。

procedure TForm1.Button1Click(Sender: TObject);
begin
  LoadDummyPage;
  SetHtmlCode('<img src="resources/test_img.PNG">');
  Memo1.Text:= GetHtmlCode;
end;



function TForm1.LoadDummyPage: Boolean;
const FileName: string= 'c:\MyProject\_ONLINE WEB SITE\dummy.html';
begin
  if not Assigned(wbBrowser.Document)
  then wbBrowser.Navigate('about:blank');

  Result := FileExists(FileName);
  if Result
  then wbBrowser.Navigate('file://' + FileName)
  else Caption:= 'file not found';
end;



procedure TForm1.SetHtmlCode(const HTMLCode: string);
var
  Doc: Variant;
begin
  if not Assigned(wbBrowser.Document)
  then wbBrowser.Navigate('about:blank');

  Doc := wbBrowser.Document;
  Doc.Write(HTMLCode);
  Doc.Close;
  Doc.DesignMode := 'On';

  WHILE wbBrowser.ReadyState < READYSTATE_INTERACTIVE
   DO Application.ProcessMessages;

  Doc.body.style.fontFamily := 'Arial';
  Doc.Close;
end;


function TForm1.GetHtmlCode: string;             { Get the HTML code from the browser }
var
  Doc: IHTMLDocument2;
  BodyElement: IHTMLElement;
begin
  if Assigned(wbBrowser.Document) and (wbBrowser.Document.QueryInterface(IHTMLDocument2, Doc) = S_OK) then
  begin
    BodyElement := Doc.body;
    if Assigned(BodyElement) then
      Result := BodyElement.innerHTML;
  end;

  if Result > ''
  then Result := StringReplace(Result, '="about:', '="', [rfReplaceAll, rfIgnoreCase]);  { Fix the 'How stop TWebBrowser from adding 'file:///' in front of my links' bug }
end;

Answer 1

您需要预加载有效的HTML“模板”字符串/流，其中包含您设置所需路径的BASE标记（带有斜杠），例如"file:///c:/MyProjects/"。

然后切换到编辑模式，您的图片SRC应该是相对的，例如"resources/R.PNG"。您最终提取的HTML编辑器应该是body.innerHTML或body.outerHTML（无论您需要什么）。您甚至可以获取整个文档源（谷歌）。

使用有效的HTML / Body包裹提取的来源，不包含BASE标记，并保存到c:\MyProjects的磁盘。

但IMG SRC的代码是完整路径！

你无能为力。这就是DOM代表HTML的方式 - 它不一定是HTML源代码。这种行为不一致。并且还依赖于你如何插入图像（我不使用execCommand并拥有自己的对话框并插入我自己的html代码）。您需要使用空字符串手动替换提取的源"file:///c:/MyProjects/"。至少，我就是这样做的。

编辑：您不需要Navigate()到外部文件。您可以通过document.write(HTML)撰写“模板”/“空”HTML。

试试这个：

const
  HTML_TEMPLATE = '<html><head><base href="file:///%s"></head><body style="font-family:Arial">%s</body></html>';

procedure TForm1.LoadHTML(HTMLCode: string);
var
  Doc: Variant;
  HTML, Path: string;
begin
  Path := 'D:\Temp\';
  HTML := Format(HTML_TEMPLATE, [Path, HTMLCode]);
  WebBrowser1.Navigate('about:blank');
  Doc := WebBrowser1.Document;
  Doc.Write(HTML);
  Doc.Close;
  Doc.DesignMode := 'On';
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  LoadHTML('<b>Hello</b><img SRC="resources/1.png">');
end;

procedure TForm1.Button2Click(Sender: TObject);
var
  Doc: IHTMLDocument2;
begin
  Doc := WebBrowser1.Document as IHTMLDocument2;
  if Assigned(Doc) then
  begin
    ShowMessage(Doc.body.innerHTML); 
  end;
end;

我的输出是：<B>Hello</B><IMG src="resources/1.png">。在某些情况下，src 可能包含完整路径。我不能100％确定何时发生这种情况。但是你需要准备好通过手动替换路径来处理这种情况。没有关于此的确凿文件，因此无论如何我总是处理这个问题。

Answer 2

我建议使用一个小型嵌入式Web服务器，例如Internet Direct（Indy）TIdHttpServer，它能够以标准方式提供所有HTTP请求。这样可以消除所有潜在的文件系统问题。

如何在TWebBrowser中显示相对路径图像？

2 个答案: