单击 HTML 内部的 link 时无法将 HTML 加载到 HTA 文件中

Question

我有一个 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>

当我点击 link 时，我需要通过 link 路径从 HTML 文件加载所有 HTML 内容，包括 [=82] =]s 我点击了。

如果我打开我的 HTA 文件并单击 link "Second"，我会成功获得第二页 link 和内容。

但是之后如果我点击 link "Third"，我得到错误

Cannot find file 'file:///D:/third' ...

如何解决问题？

更新 1

如果我将我的脚本移动到 HTA 正文的底部并添加一个 div 用于加载 HTML 例如

<!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 = ...

问题依旧

Answer 1

如评论中所述，当 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();

单击 HTML 内部的 link 时无法将 HTML 加载到 HTA 文件中

Can't load HTML into HTA file when click by link inside of the HTML

javascript

hta