KnP House for Daily

[electron] Electron webview tag에 대해서 본문

Web/Electron

[electron] Electron webview tag에 대해서

K.ung 2016.10.20 17:29

http://electron.atom.io/docs/api/web-view-tag/ 부분 제가 필요한것만 번역(의역) 하였습니다.

목차

webview tag 란?

electron app이 아닌 외부 웹 컨텐츠를 독립적인 프레임과 프로세스로 실행하기 위한 태그 입니다.(iframe 이라고 생각하면 쉽다)

  • electron app은 guest 컨텐츠(웹페이지 같은 것)를 삽입하기 위하여 webview 태그를 사용 합니다.(electron은 외부 웹 컨텐츠를 guest라고 표현) 그래서 guest 컨텐츠는 webview 태그 안에 포함됩니다.
  • 역자가 iframe과 같다고 생각하면 쉽다고 했지만 사실상 큰 차이점이 있습니다. webview는 분리된 프로세스로 운영됩니다. 그래서 electron app가 같은 동일한 권한을 가지고 있지않으며, electron 웹페이지와 삽입된 webivew 컨텐츠의 인터렉션은 비동기적으로 운영됩니다. 그래서 webview 컨텐츠로부터 electron app 페이지을 안전하게 사용 할 수 있습니다.
  • 보안 목적으로 webview 태그는 BrowserWindow에서 nodeIntegration을 활성화된상태에서 사용합니다.

예제

electron app에 원하는 곳에 webview tag를 삽입하면 끝입니다. 아래 를 보십시오.

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
  • 추가적으로 webview 리스너를 통하여 로딩 전후에 콜백을 사용하고 싶은 경우 에 대해서 다음과 같은 방식을 사용하면 됩니다.
  • 그리고 onload는 참고로 흔히 생각하는 onload 입니다.
<script>
  onload = () => {
    const webview = document.getElementById('foo')
    const indicator = document.querySelector('.indicator')

    const loadstart = () => {
      indicator.innerText = 'loading...'
    }

    const loadstop = () => {
      indicator.innerText = ''
    }

    webview.addEventListener('did-start-loading', loadstart)
    webview.addEventListener('did-stop-loading', loadstop)
  }
</script>

css 스타일링 유의사항

기본적으로 전통적인 flexbox 레이아웃을 사용할 때는 webview 컨테이너 안에 자식 object들이 꽉차게 들어가기 위하여 webview 태그는 스타일로 display:flex; 를 사용합니다.(v0.36.11)
그래서 특별하게 inline layout 위하여 display:inline-flex를 사용하지 않는 이상, 기본적으로default:flex; 를 덮어쓰면 안됩니다.

기본 예시

webview를 꽉차게 집어넣는 방법

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

webview{
    width:100vw;
    height:100vh;
}

webview 속성 태그들

실제 사용하는 것 위주로 만 설명

src

지정한 src요소값을 불러들입니다.

data:text/plain,Hello, world!. 와 같은 text 형식도 가능합니다.

<webview src="https://www.github.com/"></webview>

useragent

useragent를 사용하기 위한 속성을 지정 할 수 있습니다.

<webview src="https://www.github.com/" useragent="electron-webview"></webview>

preload

webview 컨텐츠가 실행되기전에 특별하게 선행 실행되야 할 스크립트를 선언 할 수 있습니다.

스크립트 프로토콜은 file:asar:를 사용해야 합니다. 왜냐면 guest page안에 require에 로드된 것을 사용하기 때문입니다.

<webview src="https://www.github.com/" preload="./test.js"></webview>

webview 속성 메서드들

webview 객체를 이용하여 자바스크립트안에서 소유한 메서드들을 사용가능합니다. 대신 페이지 로드가 완료된 후에 사용 가능 합니다.

const webview = document.getElementById('foo')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

.relaod()

  • webview 페이지 리로드

.canGoForward()

  • webview 페이지가 앞으로 이동 할 수 있는지 확인

.canGoBack()

  • webview 페이지가 뒤로 이동 할 수 있는지 확인

.goBack()

  • webview 페이지가 뒤로 이동

.goForward()

  • webview 페이지가 앞으로 이동

.openDevTools()

  • electron app에 inspect tool을 실행

.undo()

  • webview 안에 undo 기능 실행

.redo()

  • webview 안에 redo 기능 실행

.cut()

  • webview 안에 자르기 기능 실행

.copy()

  • webview 안에 복사 기능 실행

.paste()

  • webview 안에 붙이기 기능 실행

.selectAll()

  • webview 안에 모두선택 기능 실행

webview DOM events 들

webview 는 DOM 이벤트들 가지고 있습니다.(사용한 것만 쓰겠다...너무많...)

did-start-loading

  • webview 로드가 시작될 때 일어나는 이벤트

did-stop-loading

  • webview 로그가 끝날 때 발생하는 이벤트


저작자 표시
신고

'Web > Electron' 카테고리의 다른 글

[electron] Electron webview tag에 대해서  (0) 2016.10.20
[electron] Electron-builder 알아보자.  (0) 2016.10.20
0 Comments
댓글쓰기 폼