mjbvz/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <script>
      require('./renderer.js')
    </script>

    <iframe src="atom://bla"></iframe>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

const { protocol } = require('electron')
const http = require('http');


function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })

  protocol.registerStreamProtocol('atom', (request, callback) => {
    http.get({ hostname: 'example.com' }, res => {
      callback({
        statusCode: 200,
        headers: {
          'content-type': 'text/html'
        },
        data: res
      })
    })
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
      // On OS X it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })

app.on('activate', function () {
      // On OS X it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) {
        createWindow()
      }
    })

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

const http = require('http');

const webview = document.createElement('webview');
webview.setAttribute('partition', `webview${Date.now()}`);
webview.style.border = '4px solid hotpink';

webview.addEventListener('did-start-loading', () => {
    // register protocol in webview
    const contents = webview.getWebContents();
    contents.session.protocol.registerStreamProtocol('atom', (request, callback) => {
        http.get({ hostname: 'example.com' }, res => {
            callback({
                statusCode: 200,
                headers: {
                    'content-type': 'text/html'
                },
                data: res
            })
        })
    }, (error) => {
        if (error) console.error('Failed to register protocol')
    });
});

webview.src = `data:text/html;charset=utf-8;base64,${Buffer.from(`<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%">
<head>
	<title>Virtual Document</title>
</head>
<body style="margin: 0; overflow: hidden; width: 100%; height: 100%">
    <iframe src="atom://bla"></iframe>

</body>
</html>`).toString('base64')}`

document.body.append(webview);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body>
	<script>
	require('./renderer.js')
	</script>

	<iframe src="atom://bla"></iframe>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow } = require('electron')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let mainWindow

	const { protocol } = require('electron')
	const http = require('http');


	function createWindow() {
	// Create the browser window.
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	webviewTag: true
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()

	// Emitted when the window is closed.
	mainWindow.on('closed', function () {
	// Dereference the window object, usually you would store windows
	// in an array if your app supports multi windows, this is the time
	// when you should delete the corresponding element.
	mainWindow = null
	})

	protocol.registerStreamProtocol('atom', (request, callback) => {
	http.get({ hostname: 'example.com' }, res => {
	callback({
	statusCode: 200,
	headers: {
	'content-type': 'text/html'
	},
	data: res
	})
	})
	})
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (mainWindow === null) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.

	const http = require('http');

	const webview = document.createElement('webview');
	webview.setAttribute('partition', `webview${Date.now()}`);
	webview.style.border = '4px solid hotpink';

	webview.addEventListener('did-start-loading', () => {
	// register protocol in webview
	const contents = webview.getWebContents();
	contents.session.protocol.registerStreamProtocol('atom', (request, callback) => {
	http.get({ hostname: 'example.com' }, res => {
	callback({
	statusCode: 200,
	headers: {
	'content-type': 'text/html'
	},
	data: res
	})
	})
	}, (error) => {
	if (error) console.error('Failed to register protocol')
	});
	});

	webview.src = `data:text/html;charset=utf-8;base64,${Buffer.from(`<!DOCTYPE html>
	<html lang="en" style="width: 100%; height: 100%">
	<head>
	<title>Virtual Document</title>
	</head>
	<body style="margin: 0; overflow: hidden; width: 100%; height: 100%">
	<iframe src="atom://bla"></iframe>

	</body>
	</html>`).toString('base64')}`

	document.body.append(webview);