35 KiB
webContents
웹 페이지를 렌더링하고 제어합니다.
webContents
는 EventEmitter를
상속받았습니다. 웹 페이지의 렌더링과 관리를 책임지며
BrowserWindow
의 속성입니다. 다음은 webContents
객체에
접근하는 예시입니다:
const {BrowserWindow} = require('electron');
let win = new BrowserWindow({width: 800, height: 1500});
win.loadURL('http://github.com');
let webContents = win.webContents;
Events
webContents
객체는 다음과 같은 이벤트들을 발생시킵니다:
Event: 'did-finish-load'
탐색 작업이 끝났을 때 발생하는 이벤트입니다. 브라우저의 탭의 스피너가 멈추고 onload
이벤트가 발생했을 때를 말합니다.
Event: 'did-fail-load'
Returns:
event
EventerrorCode
IntegererrorDescription
StringvalidatedURL
StringisMainFrame
Boolean
이 이벤트는 did-finish-load
와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다.
예를 들면 window.stop()
이 실행되었을 때 발생합니다. 발생할 수 있는 전체 에러 코드의
목록과 설명은 여기서
확인할 수 있습니다. 참고로 리다이렉트 응답은 errorCode
-3과 함께 발생합니다; 이
에러는 명시적으로 무시할 수 있습니다.
Event: 'did-frame-finish-load'
Returns:
event
EventisMainFrame
Boolean
프레임(Frame)이 탐색을 끝냈을 때 발생하는 이벤트입니다.
Event: 'did-start-loading'
브라우저 탭의 스피너가 회전을 시작한 때와 같은 시점에 대응하는 이벤트입니다.
Event: 'did-stop-loading'
브라우저 탭의 스피너가 회전을 멈추었을 때와 같은 시점에 대응하는 이벤트입니다.
Event: 'did-get-response-details'
Returns:
event
Eventstatus
BooleannewURL
StringoriginalURL
StringhttpResponseCode
IntegerrequestMethod
Stringreferrer
Stringheaders
ObjectresourceType
String
요청한 리소스에 관련된 자세한 정보를 사용할 수 있을 때 발생하는 이벤트입니다.
status
는 리소스를 다운로드하기 위한 소켓 연결을 나타냅니다.
Event: 'did-get-redirect-request'
Returns:
event
EventoldURL
StringnewURL
StringisMainFrame
BooleanhttpResponseCode
IntegerrequestMethod
Stringreferrer
Stringheaders
Object
리소스를 요청하는 동안에 리다이렉트 응답을 받았을 때 발생하는 이벤트입니다.
Event: 'dom-ready'
Returns:
event
Event
주어진 프레임의 문서가 로드되었을 때 발생하는 이벤트입니다.
Event: 'page-favicon-updated'
Returns:
event
Eventfavicons
Array - URL 배열
페이지가 favicon(파비콘) URL을 받았을 때 발생하는 이벤트입니다.
Event: 'new-window'
Returns:
event
Eventurl
StringframeName
Stringdisposition
String -default
,foreground-tab
,background-tab
,new-window
,other
중 하나일 수 있습니다.options
Object - 새로운BrowserWindow
객체를 만들 때 사용되는 옵션 객체입니다.
페이지가 url
에 대하여 새로운 윈도우를 열기위해 요청한 경우 발생하는 이벤트입니다.
window.open
이나 <a target='_blank'>
과 같은 외부 링크에 의해 요청될 수 있습니다.
기본값으로 BrowserWindow
는 url
을 기반으로 생성됩니다.
event.preventDefault()
를 호출하면 새로운 창이 생성되는 것을 방지할 수 있습니다.
Event: 'will-navigate'
Returns:
event
Eventurl
String
사용자 또는 페이지가 새로운 페이지로 이동할 때 발생하는 이벤트입니다.
window.location
객체가 변경되거나 사용자가 페이지의 링크를 클릭했을 때 발생합니다.
이 이벤트는 webContents.loadURL
과 webContents.back
같은 API를 이용한
프로그램적으로 시작된 탐색에 대해서는 발생하지 않습니다.
이 이벤트는 앵커 링크를 클릭하거나 window.location.hash
의 값을 변경하는 등의 페이지
내 탐색시엔 발생하지 않습니다. 대신 did-navigate-in-page
이벤트를 사용해야 합니다.
event.preventDefault()
를 호출하면 탐색을 방지할 수 있습니다.
Event: 'did-navigate'
Returns:
event
Eventurl
String
탐색이 완료되면 발생하는 이벤트입니다.
이 이벤트는 앵커 링크를 클릭하거나 window.location.hash
의 값을 변경하는 등의 페이지
내 탐색시엔 발생하지 않습니다. 대신 did-navigate-in-page
이벤트를 사용해야 합니다.
Event: 'did-navigate-in-page'
Returns:
event
Eventurl
String
페이지 내의 탐색이 완료되면 발생하는 이벤트입니다.
페이지 내의 탐색이 발생하면 페이지 URL이 변경되지만 페이지 밖으로의 탐색은 일어나지
않습니다. 예를 들어 앵커 링크를 클릭했을 때, 또는 DOM hashchange
이벤트가 발생했을
때로 볼 수 있습니다.
Event: 'crashed'
렌더러 프로세스가 예기치 못하게 종료되었을 때 발생되는 이벤트입니다.
Event: 'plugin-crashed'
Returns:
event
Eventname
Stringversion
String
플러그인 프로세스가 예기치 못하게 종료되었을 때 발생되는 이벤트입니다.
Event: 'destroyed'
webContents
가 소멸될 때 발생되는 이벤트입니다.
Event: 'devtools-opened'
개발자 도구가 열렸을 때 발생되는 이벤트입니다.
Event: 'devtools-closed'
개발자 도구가 닫혔을 때 발생되는 이벤트입니다.
Event: 'devtools-focused'
개발자 도구에 포커스가 가거나 개발자 도구가 열렸을 때 발생되는 이벤트입니다.
Event: 'certificate-error'
Returns:
event
Eventurl
URLerror
String - 에러 코드certificate
Objectdata
Buffer - PEM 인코딩된 데이터issuerName
String
callback
Function
url
에 대한 certificate
인증서의 유효성 검증에 실패했을 때 발생하는 이벤트입니다.
사용법은 app
의 certificate-error
이벤트와
같습니다.
Event: 'select-client-certificate'
Returns:
event
Eventurl
URLcertificateList
[Objects]data
Buffer - PEM 인코딩된 데이터issuerName
String - 인증서 발급자 이름
callback
Function
클라이언트 인증이 요청되었을 때 발생하는 이벤트입니다.
사용법은 app
의 select-client-certificate
이벤트와
같습니다.
Event: 'login'
Returns:
event
Eventrequest
Objectmethod
Stringurl
URLreferrer
URL
authInfo
ObjectisProxy
Booleanscheme
Stringhost
Stringport
Integerrealm
String
callback
Function
webContents
가 기본 인증을 수행하길 원할 때 발생되는 이벤트입니다.
app
의 login
이벤트와 사용 방법은 같습니다.
Event: 'found-in-page'
Returns:
event
Eventresult
ObjectrequestId
IntegerfinalUpdate
Boolean - 더 많은 응답이 따르는 경우를 표시합니다.activeMatchOrdinal
Integer (optional) - 활성화 일치의 위치.matches
Integer (optional) - 일치하는 개수.selectionArea
Object (optional) - 첫 일치 부위의 좌표.
webContents.findInPage
요청의 결과를
사용할 수 있을 때 발생하는 이벤트입니다.
Event: 'media-started-playing'
미디어가 재생되기 시작할 때 발생하는 이벤트입니다.
Event: 'media-paused'
미디어가 중지되거나 재생이 완료되었을 때 발생하는 이벤트입니다.
Event: 'did-change-theme-color'
페이지의 테마 색이 변경될 때 발생하는 이벤트입니다. 이 이벤트는 보통 meta 태그에 의해서 발생합니다:
<meta name='theme-color' content='#ff0000'>
Event: 'update-target-url'
Returns:
event
Eventurl
URL
마우스나 키보드를 사용해 링크에 포커스를 할 때 발생하는 이벤트입니다.
Event: 'cursor-changed'
Returns:
event
Eventtype
Stringimage
NativeImage (optional)scale
Float (optional)
커서 종류가 변경될 때 발생하는 이벤트입니다. type
인수는 다음 값이 될 수 있습니다:
default
, crosshair
, pointer
, text
, wait
, help
, e-resize
, n-resize
,
ne-resize
, nw-resize
, s-resize
, se-resize
, sw-resize
, w-resize
,
ns-resize
, ew-resize
, nesw-resize
, nwse-resize
, col-resize
,
row-resize
, m-panning
, e-panning
, n-panning
, ne-panning
, nw-panning
,
s-panning
, se-panning
, sw-panning
, w-panning
, move
, vertical-text
,
cell
, context-menu
, alias
, progress
, nodrop
, copy
, none
,
not-allowed
, zoom-in
, zoom-out
, grab
, grabbing
, custom
.
만약 type
인수가 custom
이고 image
인수가 NativeImage
를 통한 커스텀
커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 scale
인수는 이미지의
크기를 조정합니다.
Event: 'context-menu'
Returns:
event
Eventparams
Objectx
Integer - x 좌표y
Integer - y 좌표linkURL
String - 컨텍스트 메뉴가 호출된 노드를 둘러싸는 링크의 URL.linkText
String - 링크에 연관된 텍스트. 콘텐츠의 링크가 이미지인 경우 빈 문자열이 됩니다.pageURL
String - 컨텍스트 메뉴가 호출된 상위 수준 페이지의 URL.frameURL
String - 컨텍스트 메뉴가 호출된 서브 프레임의 URL.srcURL
String - 컨텍스트 메뉴가 호출된 요소에 대한 소스 URL. 요소와 소스 URL은 이미지, 오디오, 비디오입니다.mediaType
String - 컨텍스트 메뉴가 호출된 노드의 종류. 값은none
,image
,audio
,video
,canvas
,file
또는plugin
이 될 수 있습니다.hasImageContent
Boolean - 컨텍스트 메뉴가 내용이 있는 이미지에서 호출되었는지 여부.isEditable
Boolean - 컨텍스트를 편집할 수 있는지 여부.selectionText
String - 컨텍스트 메뉴가 호출된 부분에 있는 선택된 텍스트.titleText
String - 컨텍스트 메뉴가 호출된 선택된 제목 또는 알림 텍스트.misspelledWord
String - 만약 있는 경우, 커서가 가르키는 곳에서 발생한 오타.frameCharset
String - 메뉴가 호출된 프레임의 문자열 인코딩.inputFieldType
String - 컨텍스트 메뉴가 입력 필드에서 호출되었을 때, 그 필드의 종류. 값은none
,plainText
,password
,other
중 한 가지가 될 수 있습니다.menuSourceType
String - 컨텍스트 메뉴를 호출한 입력 소스. 값은none
,mouse
,keyboard
,touch
,touchMenu
중 한 가지가 될 수 있습니다.mediaFlags
Object - 컨텍스트 메뉴가 호출된 미디어 요소에 대한 플래그. 자세한 사항은 아래를 참고하세요.editFlags
Object - 이 플래그는 렌더러가 어떤 행동을 이행할 수 있는지 여부를 표시합니다. 자세한 사항은 아래를 참고하세요.
mediaFlags
는 다음과 같은 속성을 가지고 있습니다:
inError
Boolean - 미디어 객체가 크래시되었는지 여부.isPaused
Boolean - 미디어 객체가 일시중지되었는지 여부.isMuted
Boolean - 미디어 객체가 음소거되었는지 여부.hasAudio
Boolean - 미디어 객체가 오디오를 가지고 있는지 여부.isLooping
Boolean - 미디어 객체가 루프중인지 여부.isControlsVisible
Boolean - 미디어 객체의 컨트롤이 보이는지 여부.canToggleControls
Boolean - 미디어 객체의 컨트롤을 토글할 수 있는지 여부.canRotate
Boolean - 미디어 객체를 돌릴 수 있는지 여부.
editFlags
는 다음과 같은 속성을 가지고 있습니다:
canUndo
Boolean - 렌더러에서 실행 취소할 수 있는지 여부.canRedo
Boolean - 렌더러에서 다시 실행할 수 있는지 여부.canCut
Boolean - 렌더러에서 잘라내기를 실행할 수 있는지 여부.canCopy
Boolean - 렌더러에서 복사를 실행할 수 있는지 여부.canPaste
Boolean - 렌더러에서 붙여넣기를 실행할 수 있는지 여부.canDelete
Boolean - 렌더러에서 삭제를 실행할 수 있는지 여부.canSelectAll
Boolean - 렌더러에서 모두 선택을 실행할 수 있는지 여부.
새로운 컨텍스트 메뉴의 제어가 필요할 때 발생하는 이벤트입니다.
Event: 'select-bluetooth-device'
Returns:
event
Eventdevices
[Objects]deviceName
StringdeviceId
String
callback
FunctiondeviceId
String
navigator.bluetooth.requestDevice
의 호출에 의해 블루투스 기기가 선택되어야 할 때
발생하는 이벤트입니다. navigator.bluetooth
API를 사용하려면 webBluetooth
가
활성화되어 있어야 합니다. 만약 event.preventDefault
이 호출되지 않으면, 첫 번째로
사용 가능한 기기가 선택됩니다. callback
은 반드시 선택될 deviceId
와 함께
호출되어야 하며, 빈 문자열을 callback
에 보내면 요청이 취소됩니다.
app.commandLine.appendSwitch('enable-web-bluetooth')
app.on('ready', () => {
webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
event.preventDefault()
let result = deviceList.find((device) => {
return device.deviceName === 'test'
})
if (!result) {
callback('')
} else {
callback(result.deviceId)
}
})
})
Instance Methods
webContents
객체는 다음과 같은 인스턴스 메서드들을 가지고 있습니다.
webContents.loadURL(url[, options])
url
URLoptions
Object (optional)httpReferrer
String - HTTP 레퍼러 url.userAgent
String - 요청을 시작한 유저 에이전트.extraHeaders
String - "\n"로 구분된 Extra 헤더들.
윈도우에 웹 페이지 url
을 로드합니다. url
은 http://
, file://
과 같은
프로토콜 접두사를 가지고 있어야 합니다. 만약 반드시 http 캐시를 사용하지 않고 로드해야
하는 경우 pragma
헤더를 사용할 수 있습니다.
const options = {extraHeaders: 'pragma: no-cache\n'};
webContents.loadURL(url, options)
webContents.downloadURL(url)
url
URL
url
의 리소스를 탐색 없이 다운로드를 시작합니다. session
의 will-download
이벤트가 발생합니다.
webContents.getURL()
현재 웹 페이지의 URL을 반환합니다.
let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('http://github.com');
let currentURL = win.webContents.getURL();
webContents.getTitle()
현재 웹 페이지의 제목을 반환합니다.
webContents.isLoading()
현재 웹 페이지가 리소스를 로드중인지 여부를 반환합니다.
webContents.isLoadingMainFrame()
메인 프레임이 여전히 로딩중인지 여부를 반환합니다. (내부 iframe 또는 frame 포함)
webContents.isWaitingForResponse()
현재 웹 페이지가 페이지의 메인 리소스로부터 첫 응답을 기다리고있는지 여부를 반환합니다.
webContents.stop()
대기중인 탐색 작업을 모두 멈춥니다.
webContents.reload()
현재 웹 페이지를 새로고침합니다.
webContents.reloadIgnoringCache()
현재 웹 페이지의 캐시를 무시한 채로 새로고침합니다.
webContents.canGoBack()
브라우저가 이전 웹 페이지로 돌아갈 수 있는지 여부를 반환합니다.
webContents.canGoForward()
브라우저가 다음 웹 페이지로 이동할 수 있는지 여부를 반환합니다.
webContents.canGoToOffset(offset)
offset
Integer
웹 페이지가 offset
로 이동할 수 있는지 여부를 반환합니다.
webContents.clearHistory()
탐색 기록을 삭제합니다.
webContents.goBack()
브라우저가 이전 웹 페이지로 이동하게 합니다.
webContents.goForward()
브라우저가 다음 웹 페이지로 이동하게 합니다.
webContents.goToIndex(index)
index
Integer
브라우저가 지정된 절대 웹 페이지 인덱스로 탐색하게 합니다.
webContents.goToOffset(offset)
offset
Integer
"current entry"에서 지정된 offset으로 탐색합니다.
webContents.isCrashed()
렌더러 프로세스가 예기치 않게 종료되었는지 여부를 반환합니다.
webContents.setUserAgent(userAgent)
userAgent
String
현재 웹 페이지의 유저 에이전트를 덮어씌웁니다.
webContents.getUserAgent()
현재 웹 페이지의 유저 에이전트 문자열을 반환합니다.
webContents.insertCSS(css)
css
String
CSS 코드를 현재 웹 페이지에 삽입합니다.
webContents.executeJavaScript(code[, userGesture, callback])
code
StringuserGesture
Boolean (optional)callback
Function (optional) - 스크립트의 실행이 완료되면 호출됩니다.result
페이지에서 자바스크립트 코드를 실행합니다.
기본적으로 requestFullScreen
와 같은 몇몇 HTML API들은 사용자의 조작에 의해서만
호출될 수 있습니다. userGesture
를 true
로 설정하면 이러한 제약을 무시할 수
있습니다.
webContents.setAudioMuted(muted)
muted
Boolean
현재 웹 페이지의 소리를 음소거합니다.
webContents.isAudioMuted()
현재 페이지가 음소거 되어있는지 여부를 반환합니다.
webContents.undo()
웹 페이지에서 undo
편집 커맨드를 실행합니다.
webContents.redo()
웹 페이지에서 redo
편집 커맨드를 실행합니다.
webContents.cut()
웹 페이지에서 cut
편집 커맨드를 실행합니다.
webContents.copy()
웹 페이지에서 copy
편집 커맨드를 실행합니다.
webContents.paste()
웹 페이지에서 paste
편집 커맨드를 실행합니다.
webContents.pasteAndMatchStyle()
웹 페이지에서 pasteAndMatchStyle
편집 커맨드를 실행합니다.
webContents.delete()
웹 페이지에서 delete
편집 커맨드를 실행합니다.
webContents.selectAll()
웹 페이지에서 selectAll
편집 커맨드를 실행합니다.
webContents.unselect()
웹 페이지에서 unselect
편집 커맨드를 실행합니다.
webContents.replace(text)
text
String
웹 페이지에서 replace
편집 커맨드를 실행합니다.
webContents.replaceMisspelling(text)
text
String
웹 페이지에서 replaceMisspelling
편집 커맨드를 실행합니다.
webContents.insertText(text)
text
String
포커스된 요소에 text
를 삽입합니다.
webContents.findInPage(text[, options])
text
String - 찾을 콘텐츠, 반드시 공백이 아니여야 합니다.options
Object (optional)forward
Boolean - 앞에서부터 검색할지 뒤에서부터 검색할지 여부입니다. 기본값은true
입니다.findNext
Boolean - 작업을 계속 처리할지 첫 요청만 처리할지 여부입니다. 기본값은false
입니다.matchCase
Boolean - 검색이 대소문자를 구분할지 여부입니다. 기본값은false
입니다.wordStart
Boolean - 단어의 시작 부분만 볼 지 여부입니다. 기본값은false
입니다.medialCapitalAsWordStart
Boolean -wordStart
와 합쳐질 때, 소문자 또는 비문자가 따라붙은 대문자로 일치가 시작하는 경우 단어 중간의 일치를 허용합니다. 여러가지 다른 단어 내의 일치를 허용합니다. 기본값은false
입니다.
웹 페이지에서 text
에 일치하는 모든 대상을 찾는 요청을 시작하고 요청에 사용된 요청을
표현하는 정수(integer)
를 반환합니다. 요청의 결과는
found-in-page
이벤트를 통해 취득할 수
있습니다.
webContents.stopFindInPage(action)
action
String -webContents.findInPage
요청이 종료되었을 때 일어날 수 있는 작업을 지정합니다.clearSelection
- 선택을 일반 선택으로 변경합니다.keepSelection
- 선택을 취소합니다.activateSelection
- 포커스한 후 선택된 노드를 클릭합니다.
제공된 action
에 대한 webContents
의 모든 findInPage
요청을 중지합니다.
webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate)
webContents.stopFindInPage('clearSelection');
});
const requestId = webContents.findInPage('api');
webContents.hasServiceWorker(callback)
callback
Function
ServiceWorker가 등록되어있는지 확인하고 callback
에 대한 응답으로 boolean 값을
반환합니다.
webContents.unregisterServiceWorker(callback)
callback
Function
ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족될 때 callback
에
대한 응답으로 boolean을 반환하거나 JS Promise가 만족되지 않을 때 false
를 반환합니다.
webContents.print([options])
options
Object (optional)
silent
Boolean - 사용자에게 프린트 설정을 묻지 않습니다. 기본값을false
입니다.printBackground
Boolean - 웹 페이지의 배경 색과 이미지를 출력합니다. 기본값은false
입니다.
윈도우의 웹 페이지를 프린트합니다. silent
가 false
로 지정되어있을 땐, Electron이
시스템의 기본 프린터와 기본 프린터 설정을 가져옵니다.
웹 페이지에서 window.print()
를 호출하는 것은
webContents.print({silent: false, printBackground: false})
를 호출하는 것과
같습니다.
참고: Windows에서의 프린터 API는 pdf.dll
에 의존합니다. 따라서 어플리케이션이
print기능을 사용하지 않는 경우 전체 바이너리 크기를 줄이기 위해 pdf.dll
을 삭제해도
됩니다.
webContents.printToPDF(options, callback)
options
ObjectmarginsType
Integer - 사용할 마진의 종류를 지정합니다. 0 부터 2 사이 값을 사용할 수 있고 각각 기본 마진, 마진 없음, 최소 마진입니다.pageSize
String - 생성되는 PDF의 페이지 크기를 지정합니다. 값은A3
,A4
,A5
,Legal
,Letter
,Tabloid
또는 마이크론 단위의height
&width
가 포함된 객체를 사용할 수 있습니다.printBackground
Boolean - CSS 배경을 프린트할지 여부를 정합니다.printSelectionOnly
Boolean - 선택된 영역만 프린트할지 여부를 정합니다.landscape
Boolean - landscape을 위해선true
를, portrait를 위해선false
를 사용합니다.
callback
Function -(error, data) => {}
Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 웹 페이지를 PDF로 프린트합니다.
callback
은 작업이 완료되면 callback(error, data)
형식으로 호출됩니다. data
는
생성된 PDF 데이터를 담고있는 Buffer
입니다.
기본으로 비어있는 options
은 다음과 같이 여겨지게 됩니다:
{
marginsType: 0,
printBackground: false,
printSelectionOnly: false,
landscape: false
}
다음은 webContents.printToPDF
의 예시입니다:
const {BrowserWindow} = require('electron');
const fs = require('fs');
let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('http://github.com');
win.webContents.on('did-finish-load', () => {
// 기본 프린트 옵션을 사용합니다
win.webContents.printToPDF({}, (error, data) => {
if (error) throw error;
fs.writeFile('/tmp/print.pdf', data, (error) => {
if (error)
throw error;
console.log('Write PDF successfully.');
});
});
});
webContents.addWorkSpace(path)
path
String
특정 경로를 개발자 도구의 워크스페이스에 추가합니다. 반드시 개발자 도구의 생성이 완료된 이후에 사용해야 합니다.
win.webContents.on('devtools-opened', () => {
win.webContents.addWorkSpace(__dirname);
});
webContents.removeWorkSpace(path)
path
String
특정 경로를 개발자 도구의 워크스페이스에서 제거합니다.
webContents.openDevTools([options])
options
Object (optional)detach
Boolean - 새 창에서 개발자 도구를 엽니다.mode
String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom", "undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를 사용합니다.undocked
모드에선 다시 도킹할 수 있습니다. 하지만detach
모드에선 할 수 없습니다.
개발자 도구를 엽니다.
webContents.closeDevTools()
개발자 도구를 닫습니다.
webContents.isDevToolsOpened()
개발자 도구가 열려있는지 여부를 반환합니다.
webContents.isDevToolsFocused()
개발자 도구에 포커스 되어있는지 여부를 반환합니다.
webContents.toggleDevTools()
개발자 도구를 토글합니다.
webContents.inspectElement(x, y)
x
Integery
Integer
(x
, y
)위치의 요소를 조사합니다.
webContents.inspectServiceWorker()
서비스 워커 컨텍스트(service worker context)를 위한 개발자 도구를 엽니다.
webContents.send(channel[, arg1][, arg2][, ...])
channel
Stringarg
(optional)
channel
을 통하여 렌더러 프로세스에 비동기 메시지를 보냅니다. 임의의 인수를 보낼수도
있습니다. 인수들은 내부적으로 JSON 포맷으로 직렬화 되며, 이후 함수와 프로토타입 체인은
포함되지 않게 됩니다.
렌더러 프로세스는 ipcRenderer
모듈을 통하여 channel
를 리스닝하여 메시지를 처리할
수 있습니다.
메인 프로세스에서 렌더러 프로세스로 메시지를 보내는 예시 입니다:
// In the main process.
let win = null;
app.on('ready', () => {
win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file://' + __dirname + '/index.html');
win.webContents.on('did-finish-load', () => {
win.webContents.send('ping', 'whoooooooh!');
});
});
<!-- index.html -->
<html>
<body>
<script>
require('electron').ipcRenderer.on('ping', (event, message) => {
console.log(message); // "whoooooooh!" 출력
});
</script>
</body>
</html>
webContents.enableDeviceEmulation(parameters)
parameters
Object, properties:
screenPosition
String - 에뮬레이트 할 화면 종료를 지정합니다 (기본값:desktop
)desktop
mobile
screenSize
Object - 에뮬레이트 화면의 크기를 지정합니다 (screenPosition == mobile)width
Integer - 에뮬레이트 화면의 너비를 지정합니다height
Integer - 에뮬레이트 화면의 높이를 지정합니다
viewPosition
Object - 화면에서 뷰의 위치 (screenPosition == mobile) (기본값:{x: 0, y: 0}
)x
Integer - 좌상단 모서리로부터의 x 축의 오프셋y
Integer - 좌상단 모서리로부터의 y 축의 오프셋
deviceScaleFactor
Integer - 디바이스의 스케일 팩터(scale factor)를 지정합니다. (0일 경우 기본 디바이스 스케일 팩터를 기본으로 사용합니다. 기본값:0
)viewSize
Object - 에뮬레이트 된 뷰의 크기를 지정합니다 (빈 값은 덮어쓰지 않는 다는 것을 의미합니다)width
Integer - 에뮬레이트 된 뷰의 너비를 지정합니다height
Integer - 에뮬레이트 된 뷰의 높이를 지정합니다
fitToView
Boolean - 에뮬레이트의 뷰가 사용 가능한 공간에 맞추어 스케일 다운될지를 지정합니다 (기본값:false
)offset
Object - 사용 가능한 공간에서 에뮬레이트 된 뷰의 오프셋을 지정합니다 (fit to view 모드 외에서) (기본값:{x: 0, y: 0}
)x
Float - 좌상단 모서리에서 x 축의 오프셋을 지정합니다y
Float - 좌상단 모서리에서 y 축의 오프셋을 지정합니다
scale
Float - 사용 가능한 공간에서 에뮬레이드 된 뷰의 스케일 (fit to view 모드 외에서, 기본값:1
)
parameters
로 디바이스 에뮬레이션을 사용합니다.
webContents.disableDeviceEmulation()
webContents.enableDeviceEmulation
로 활성화된 디바이스 에뮬레이선을 비활성화 합니다.
webContents.sendInputEvent(event)
event
Objecttype
String (required) - 이벤트의 종류. 다음 값들을 사용할 수 있습니다:mouseDown
,mouseUp
,mouseEnter
,mouseLeave
,contextMenu
,mouseWheel
,mouseMove
,keyDown
,keyUp
,char
.modifiers
Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함 할 수 있습니다:shift
,control
,alt
,meta
,isKeypad
,isAutoRepeat
,leftButtonDown
,middleButtonDown
,rightButtonDown
,capsLock
,numLock
,left
,right
.
Input event
를 웹 페이지로 전송합니다.
키보드 이벤트들에 대해서는 event
객체는 다음 속성들을 사용할 수 있습니다:
keyCode
String (required) - 키보드 이벤트가 발생할 때 보내질 문자. Accelerator의 올바른 키 코드만 사용해야 합니다.
마우스 이벤트들에 대해서는 event
객체는 다음 속성들을 사용할 수 있습니다:
x
Integer (required)y
Integer (required)button
String - 눌린 버튼. 다음 값들이 가능합니다.left
,middle
,right
globalX
IntegerglobalY
IntegermovementX
IntegermovementY
IntegerclickCount
Integer
mouseWheel
이벤트에 대해서는 event
객체는 다음 속성들을 사용할 수 있습니다:
deltaX
IntegerdeltaY
IntegerwheelTicksX
IntegerwheelTicksY
IntegeraccelerationRatioX
IntegeraccelerationRatioY
IntegerhasPreciseScrollingDeltas
BooleancanScroll
Boolean
webContents.beginFrameSubscription(callback)
callback
Function
캡처된 프레임과 프레젠테이션 이벤트를 구독하기 시작합니다. callback
은
프레젠테이션 이벤트가 발생했을 때 callback(frameBuffer)
형태로 호출됩니다.
frameBuffer
는 raw 픽셀 데이터를 가지고 있는 Buffer
객체입니다. 많은 장치에서
32비트 BGRA 포맷을 사용하여 효율적으로 픽셀 데이터를 저장합니다. 하지만 실질적인
데이터 저장 방식은 프로세서의 엔디안 방식에 따라서 달라집니다. (따라서 현대의 많은
프로세서에선 little-endian 방식을 사용하므로 위의 포맷을 그대로 표현합니다. 하지만
몇몇 프로세서는 big-endian 방식을 사용하는데, 이 경우 32비트 ARGB 포맷을 사용합니다)
webContents.endFrameSubscription()
프레임 프레젠테이션 이벤트들에 대한 구독을 중지합니다.
webContents.savePage(fullPath, saveType, callback)
fullPath
String - 전체 파일 경로.saveType
String - 저장 종류를 지정합니다.HTMLOnly
- 페이지의 HTML만 저장합니다.HTMLComplete
- 페이지의 완성된 HTML을 저장합니다.MHTML
- 페이지의 완성된 HTML을 MHTML로 저장합니다.
callback
Function -(error) => {}
.error
Error
만약 페이지를 저장하는 프로세스가 성공적으로 끝났을 경우 true를 반환합니다.
win.loadURL('https://github.com');
win.webContents.on('did-finish-load', () => {
win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => {
if (!error)
console.log('Save page successfully');
});
});
Instance Properties
WebContents
객체들은 다음 속성들을 가지고 있습니다:
webContents.id
이 WebContents의 유일 ID.
webContents.session
이 webContents에서 사용하는 session 객체를 반환합니다.
webContents.hostWebContents
현재 WebContents
를 소유하는 WebContents
를 반환합니다.
webContents.devToolsWebContents
이 WebContents
에 대한 개발자 도구의 WebContents
를 가져옵니다.
참고: 사용자가 절대로 이 객체를 저장해서는 안 됩니다. 개발자 도구가 닫혔을 때,
null
이 반환될 수 있습니다.
webContents.debugger
디버거 API는 원격 디버깅 프로토콜에 대한 대체 수송자 역할을 합니다.
try {
win.webContents.debugger.attach('1.1');
} catch(err) {
console.log('Debugger attach failed : ', err);
};
win.webContents.debugger.on('detach', (event, reason) => {
console.log('Debugger detached due to : ', reason);
});
win.webContents.debugger.on('message', (event, method, params) => {
if (method === 'Network.requestWillBeSent') {
if (params.request.url === 'https://www.github.com')
win.webContents.debugger.detach();
}
});
win.webContents.debugger.sendCommand('Network.enable');
webContents.debugger.attach([protocolVersion])
protocolVersion
String (optional) - 요쳥할 디버깅 프로토콜의 버전.
webContents
에 디버거를 부착합니다.
webContents.debugger.isAttached()
디버거가 webContents
에 부착되어 있는지 여부를 반환합니다.
webContents.debugger.detach()
webContents
로부터 디버거를 분리시킵니다.
webContents.debugger.sendCommand(method[, commandParams, callback])
method
String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중 하나가 됩니다.commandParams
Object (optional) - 요청 인수를 표현한 JSON 객체.callback
Function (optional) - 응답error
Object - 커맨드의 실패를 표시하는 에러 메시지.result
Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해 정의된 응답
지정한 커맨드를 디버깅 대상에게 전송합니다.
Event: 'detach'
event
Eventreason
String - 디버거 분리 사유.
디버깅 세션이 종료될 때 발생하는 이벤트입니다. webContents
가 닫히거나 개발자 도구가
부착된 webContents
에 대해 호출될 때 발생합니다.
Event: 'message'
event
Eventmethod
String - 메서드 이름.params
Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수
디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다.