(1). 需求

AJAX请求之后,会对Document进行渲染,期望在ajax之后,还能拿到Ajax渲染的数据.

(2). main.js

在man.js里,尝试过用(mainWindow.webContents.on(“dom-ready”…)),也未能解决该方法,而且代码有些丑.

const {app, BrowserWindow , BrowserView , screen} = require('electron')
const path = require('path')

// 创建一个Window
function createWindow () {
  // 获取屏幕信息(宽和高)
  const { width, height } = screen.getPrimaryDisplay().workAreaSize

  const mainWindow = new BrowserWindow({
    width: width,
    height: height,
    // 控制有无边框的窗口页面.
    frame : true,
    // 控制窗口是否显示(可结合:ready-to-show事件)
    show:true,
    // 设置背景颜色
    // backgroundColor: '#2e2c29',
    webPreferences: {
      // 是否集成nodejs
      nodeIntegration: true,
      // 开启远程模块
      enableRemoteModule : true,
      // webviewtag开启
      webviewTag : true,
      // 预先需要加载的脚本
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  // mainWindow.loadURL('https://www.baidu.com');
  mainWindow.loadURL('https://open.tongtool.com/apiDoc.html#/?docId=43a41f3680e04756a122d8671f2fc0ca');

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

  // webContents加载完dom后触发事件
  mainWindow.webContents.on("dom-ready",(evnet)=>{
    // 保存页面到指定路径,该方法不太靠谱.
    // 按理来说:JS渲染HTML之后,才应该回调该方法,但是,从现在情况来看
    // 该方法是只要DOM渲染完成就回调.
    // setTimeout(()=>{
    //   const content = mainWindow.webContents;
    //   content.savePage("/Users/lixin/WorkspaceJS/electron-quick-start/open-api.html","HTMLComplete",(error)=>{
    //     if (!error) console.log('Save page successfully')
    //   });
    //   console.log("page load finish *****************************");
    // },5000);
  });
}

// 当Electron完成初始化时触发
app.whenReady().then(() => {
  createWindow();

  // 当Electron活动时触发
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当Electron所有窗口被关闭时触发 
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

(3). preload.js

DOMContentLoaded 和 onload不同之处在于,DOMContentLoaded属于DOM节点加载完成,而onload代表所有元素(CSS/JS)都加载完成.


// 加载文件系统
const fs = require("fs");

// 页面所有的依赖元素都加载完成后,再执行该onload方法
onload = () => {
   //  整个页面所有内容加载完成之后,再去dump HTML内容
   // 稍微延迟一下(2000).防止JS还在渲染HTML.
    setTimeout(()=>{
	  // 获得Document
      let doc = document.documentElement.outerHTML;
	  // 写出到指定路径
      let path = "/Users/lixin/WorkspaceJS/electron-quick-start/open-api.html"
	  // 这里可以进行异步写入.
      fs.writeFileSync(path,doc)
    } , 2000);
}



window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
});

(4). 测试效果(10次)

"Electron onload"

(5). 总结

完美的解决方案还是用:onload而不是:DOMContentLoaded.所以,对于JS还是需要更深的了解.