Question

我正在尝试创建降价编辑器。

到目前为止：我已经加载了index页面。我正在使用fs.readdir获取所有降价文件的标题并将其显示在边栏中。然后，单击这些标题#content即可得到内容。

   module.exports = (win) => { 
        fs.readdir( './data', (err, data) =>{
        data.map(title => {    
          if(title.split('.md').length==2){
            el = document.createElement("li"); // get gave it the title ..
            el.addEventListener('click', function(e){
              fs.readFile(`./data/${title}`, (err, data) => {
                document.getElementById('content').innerHTML = data;
              });
            })
            document.getElementById('titles').appendChild(el) // title are on the page

问题是当我介绍另一个页面时

我有一个偏好设置页面

win.loadURL(path.join('file://', __dirname, '../static/preferences.html'))

它具有相同的侧边栏，因此我导入了相同的代码来获取标题。但是现在，当我单击链接之一时，我不需要document.getElementById('content').innerHTML = data;，而是要加载index页面然后注入内容

到目前为止，我已经尝试过

const checkPageState = (pageName, callback) => {
  if(pageName === "preferences"){
    ipcRenderer.send(GO_TO_PAGE, 'index')
  }
  setTimeout(callback(), 1000);
}
...
el.addEventListener('click', function(e){
    checkPageState(win, ()=>{
      fs.readFile(`./data/${title}`, (err, data) => {
       if (err) throw err;
     fileDir = `./data/${title}`;
     document.getElementById('content').innerHTML = data;
    });
  })
})

我的想法是，ipcRenderer.send(GO_TO_PAGE, 'index')会在稍等片刻后加载索引页（这样做），然后将数据注入到index页中。不是！

我该怎么做？

Answer 1

我最近也尝试执行此操作，这有点棘手，但是我发现了一些可行的方法：

在电子中，当它尝试转到另一页时，我用以下命令阻止了它的进入：

win.webContents.on('will-navigate', function (evt, url) {
    evt.preventDefault();
    win.webContents.executeJavaScript('makeHiddenPageIframe("' + url + '");');
});

然后它调用页面上定义的makeHiddenPageIframe函数。

然后在页面中定义makeHiddenPageIframe函数：

function makeHiddenPageIframe (url) {
    var hiddenPage = document.createElement("iframe");
    hiddenPage.setAttribute("src", url);
    hiddenPage.style.display = 'none';
    document.body.appendChild(hiddenPage);
    hiddenPage.onload = function () {
        var frameDocument = hiddenPage.document;
        if (hiddenPage.contentDocument) {
            frameDocument = hiddenPage.contentDocument;
        } else if (hiddenPage.contentWindow) {
            frameDocument = hiddenPage.contentWindow.document;
        }
        document.open();
        document.write(frameDocument.documentElement.innerHTML);
        document.close();
        window.history.pushState("", document.title, url.replace('https://' + window.location.hostname, ''));
    }
}

然后创建一个iframe并在其中加载页面，然后在该页面加载后将所有html从iframe复制到父窗口，这样切换就好像立即发生了。

另外，底部的window.history.pushState是当您覆盖html时，URL保持不变，因此当您重新加载html时，它返回到原始页面，但是window.history.pushState更改了url而没有重新加载页面

任何形式的导航都会加载iframe，因此您可以保留win.loadURL(转到另一个降价页面。

The 'will-navigate' event docs.

window.history.pushState ref.

我希望这会有所帮助：）

如何加载页面并立即在电子中编辑DOM？

1 个答案: