Невозможно загрузить HTML в файл HTA при переходе по ссылке внутри HTML. - PullRequest
Новая
       14

Невозможно загрузить HTML в файл HTA при переходе по ссылке внутри HTML.

0 голосов
/ 30 мая 2018

У меня есть один файл HTA, один файл JS помещен в файл HTA, и файлы HTML с содержимым загружаются в файл HTA.

Например, это my_hta_file.hta 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body></body>
</html>
<script type="text/javascript" src="my_js_file.js"></script>

и это my_js_file.js 

function getFileContent(filePath) {
    var fileStream = new ActiveXObject('ADODB.Stream');
    fileStream.Type = 2;
    fileStream.Charset = 'utf-8';
    fileStream.Open();
    fileStream.loadFromFile(filePath);
    var fileContent = fileStream.ReadText();
    fileStream.Close();
    return fileContent;
}

// initial loading of home page
document.body.innerHTML = getFileContent('index.html');

var pageLinks = document.querySelectorAll('a');
for(i = 0; i < pageLinks.length; i++) {
    var linkHref = pageLinks[i].getAttribute('href');

    pageLinks[i].setAttribute('href','#!'+linkHref);
    // I add this leading prefix to prevent following by the link when click by it

    pageLinks[i].onclick = function() {
        var page = this.getAttribute('href').substring(3);
        if(page == '') {
            var page = 'index';
        }

        // load HTML of the page by link path when click by the link
        document.body.innerHTML = getFileContent(page+'.html');
    }
}

и мои HTML-файлы с содержимым:

index.html 

<a href="/">Home</a>
<a href="/second">Second</a>
<a href="/third">Third</a>
<div>Home page content</div>

second.html 

<a href="/">Home</a>
<a href="/second">Second</a>
<a href="/third">Third</a>
<div>Second page content</div>

third.html 

<a href="/">Home</a>
<a href="/second">Second</a>
<a href="/third">Third</a>
<div>Third page content</div>

Когда я нажимаюпо ссылке мне нужно загрузить все содержимое HTML из файла HTML по пути ссылки, включая те самые ссылки, по которым я щелкаю.

Если я открою свой файл HTA и нажму ссылку «Второй», я получуссылки и содержимое второй страницы успешно.

Но после этого, если я нажимаю ссылку "Третье", я получаю сообщение об ошибке

Не удается найти файл 'file: /// D:/ третий '...

Как решить проблему?

ОБНОВЛЕНИЕ 1

Если я переместлю свой сценарий вв нижней части тела HTA и добавить div для загрузки HTML fили пример 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body>
  <div id="body"></div>
  <script type="text/javascript" src="my_js_file.js"></script>
</body>
</html>

и в моем JS-файле загрузите HTML в div, т.е. 

document.getElementById('body').innerHTML = ...

вместо 

document.body.innerHTML = ...

проблема все еще остается

1 Ответ

0 голосов
/ 30 мая 2018

Как сказано в комментариях, все ссылки с прикрепленными слушателями событий заменяются новыми элементами при изменении innerHTML.Эти новые ссылки не имеют прослушивателей, которые были у старых элементов.

Фрагмент ниже показывает, как вы можете использовать функцию для повторного создания слушателей.Фрагмент предполагает, что используется элемент обертки содержимого (как вы, кажется, уже используете его).Я также немного упростил код и использовал более современный JS (поскольку в OP используется режим IE9). 

function getFileContent (filePath) {
    // As it currently is
}

// Handles clicks on the links
function newContent (e) { // e contains information of the current event
    var path = e.target.href || 'index',
        body = document.getElementById('body');
    e.preventDefault(); // Prevents the default action of the clicked link
    body.innerHTML = getFileContent(path + '.html');
    init(); // Initialize the new content
    return;    
}

// Initializes the page
function init() {
    var links = document.querySelectorAll('a'),
        i, ei;
    for (i = 0, ei = links.length; i < ei; i++) {
        links[i].addEventListener('click', newContent);
    }
    return;
}

// Initialize the first page
init();
...