TEdgeBrowser에서 스크립트 실행하기와 소스 보기

2021-06-03
Posted by: Narae Kim
Categories: 교육, 메인 노출

원문 링크: https://blogs.embarcadero.com/execute-scripts-and-view-source-with-tedgebrowser/
작성자(작성일): Jim McKeeth (2021.3)

10.4.2 시드니에서 델파이, C++빌더, RAD스튜디오에 있는 TEdgeBrowser는 마이크로소프트 Edge와 해당 Edge WebView2 런타임의 정식 릴리즈 버전에서 작동한다. 이 VCL 컴포넌트 즉 TEdgeBrowser는 기존의 TWebBrowser를 능가하는 향상된 기능을 제공하는데 그 중에서 일부를 소개하고자 한다. 임의의 HTML 구문 렌더링, 임의의 자바스크립트 실행, 웹페이지에서 HTML 소스 잡아오기이다.

먼저, TEdgeBrowser를 설치해야한다. 다음 3단계로 진행한다:

1. GetIt에서 EdgeView2 SDK를 찾아 설치한다.

IDE에서 GetIt창을 이용한다.
또는, GetItCmd와 RAD스튜디오 명령 프롬프트를 이용한다(AutoGetIt도 이용 가능).
getitcmd -ae -i=EdgeView2SDK-1.0.664.37

2. 환경에 맞는 Microsoft EdgeView2 런타임을 다운로드하고 설치한다.

3가지 방법 중 1가지를 선택할 수 있다.
1. Evergreen Bootstraper – 현재 아키텍처에 맞는 최신 런타입을 다운로드하고 설치한다. 배포할 애플리케이션과 함께 설치할 때 사용한다.
2. Evergreen 독립 설치기 – 윈32 또는 윈64용을 오프라인에서 설치한다.
3. 버전 고정 – Evergreen 독립 설치기 방식이며, 최신 버전 대신 원하는 이전 버전을 다운로드하고 설치할 수 있다.
윈32 애플리케이션을 구축하고 있다면 x86버전을, 윈64 애플리케이션이라면 x64 버전을 설치한다. 둘 다 설치해도 된다.

3. 당신의 프로그램은 실행 중에 WebView2Loader.dll에 접근할 수 있어야 한다. 가장 쉬운 방법은 해당 dll을 실행 파일과 같은 위치에 두거나, 또는 Post Build 이벤트를 사용하는 것이다.

Win32 용: copy /y “$(BDS)Redistwin64WebView2Loader.dll” “$(OUTPUTDIR)”
Win64 용: copy /y “$(BDS)Redistwin32WebView2Loader.dll” “$(OUTPUTDIR)”

애플리케이션을 배포할 때 올바른 WebView2Loader.dll 를 포함해야 한다. 그리고, 사용자 컴퓨터에 Microsoft EdgeView2 런타임이 설치되어 있는 지를 확인해야 한다. 언젠간 기본 설치가 될 수도 있겠으나, 가장 쉬운 방식은 Evergreen Bootstrapper를 사용하는 것이다.

임의의 HTML 표현하기

임의의 HTML을 TEdgeView 안에 올리려면, NavigateToString 메소드를 호출하여 해당 HTML을 문자열로 전달한다.

EdgeBrowser1.NavigateToString('<html><body><h1> Hello From Delphi</h1></body></html>');

1	EdgeBrowser1.NavigateToString('<html><body><h1> Hello From Delphi</h1></body></html>');

그러면, 코드가 브라우저 안에서 바로 렌더링 된다. HTML을 별도의 파일에 저장하고 불러오는 과정이 필요 없다.

임의의 자바스크립트 실행하기

TEdgeBrowser의 ExecuteScript 메소드를 사용하면 자바스크립트를 실행할 수 있다.

EdgeBrowser1.ExecuteScript('alert("hello Delphi!");')

1	EdgeBrowser1.ExecuteScript('alert("hello Delphi!");')

이 스크립트는 현재 페이지 안에서 실행된다, 마치 브라우저에서 자바스크립트 콘솔을 열어서 하는 것과 같다. 따라서 DOM을 다룰 수도 있다.

소스 보기

웹페이지의 소스 보기를 하려면 ExecuteScript 메소드에서부터 시작한다. 하지만, 조금 더 해야 할 것이 있다. 스크립트는 비동기로 실행되기 때문에 당신의 스크립트 실행이 끝날 때를 다루는 이벤트 핸들러가 있다. 이 이벤트 시 JSON 오브젝트를 반환할 수 있는데, 반환되는 JSON 오브젝트로 해당 HTML소스를 반환할 수 있다.

EdgeBrowser1.ExecuteScript('encodeURI(document.documentElement.outerHTML)');

1	EdgeBrowser1.ExecuteScript('encodeURI(document.documentElement.outerHTML)');

아래와 같이 DOM (Document Object Model)을 사용하여 Document Element(루트 엘리먼트, 즉 <HTML> )을 잡고 해당 outerHTML를 요청한다. outerHTML는 해당 Document Element에 들어 있는 모든 HTML이다. 그리고 나서 우리는 encodeURL을 사용하여 HTML을 인코딩한다. 해당 [OnExecuteScript] 이벤트 핸들러 코드는 다음과 같다.

uses
  System.NetEncoding;
 
procedure TEdgeViewForm.EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser;
  AResult: HRESULT; const AResultObjectAsJson: string);
begin
  if AResultObjectAsJson <> 'null' then
    memoHTML.Text := TNetEncoding.URL.Decode(AResultObjectAsJson).DeQuotedString('"');
end;

uses

System.NetEncoding;

procedure TEdgeViewForm.EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser;

AResult: HRESULT; const AResultObjectAsJson: string);

begin

if AResultObjectAsJson <> 'null' then

memoHTML.Text := TNetEncoding.URL.Decode(AResultObjectAsJson).DeQuotedString('"');

end;

이 이벤트는 [ExecuteScript] 메소드가 호출되고 난 후에 항상 실행된다. 하지만, 반환되는 결과값이 없는 경우에는 [AResultObjectAsJson] 파라미터에 [‘null’]이 들어 있을 것이다. 따라서 우리는 해당 ‘null’ 값은 무시해야 한다. ‘null’이 아닌 값이 전달되었을 때에는 [TNetEncoding.URL.Decode]를 사용하여 해당 인코딩을 제거하고, [DeQuotedString(‘ ” ‘)]를 사용하여 쌍따옴표를 제거한다.

그 결과를 받아서 NavigateToString() 안에 넣어서 바로 보낼 수도 있다.

요약

깃허브에 있는 해당 데모 코드: RAD Studio-Demo Kit/10.4.2-demos/EdgeView/

TEdgeBrowser는 업그레이드 하지 않았다면 놓치고 있을 10.4.2 시드니에서 향상된 기능 중 하나이다.

10.4.2에서 업데이트된 기능들:

RAD스튜디오 10.4.2 새 기능들 자세히 살펴보기: https://devgear.co.kr/archives/4242
What’s NEW! RAD스튜디오 10.4.2: https://devgear.co.kr/archives/4238

Post Views: 2,013

델파이 샘플 웹

TEdgeBrowser에서 스크립트 실행하기와 소스 보기

임의의 HTML 표현하기

임의의 자바스크립트 실행하기

소스 보기

요약

NEWS

월별 소식

검색