Как мне загрузить страницу и сразу отредактировать DOM в электронном виде?

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 остается неизменным, поэтому при повторной загрузке он возвращается на исходную страницу, но window.history.pushState изменяет URL без перезагрузки страницы.

Любая форма навигации будет выполнять загрузку iframe, поэтому вы можете win.loadURL( перейти на другую страницу уценки.

Документы о событиях 'will-navigate'.

window.history.pushState ref.

Надеюсь, это поможет:)