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>

当我点击链接时，我需要通过链接路径加载HTML文件中的所有HTML内容，包括我点击的链接。

如果我打开我的HTA文件并点击“第二个”链接，我会成功获得第二页链接和内容。

但之后如果点击“第三个”链接，我会收到错误

无法找到文件'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

1 个答案: