时间戳

首页 > 解决方案 > 单击 HTML 内的链接时无法将 HTML 加载到 HTA 文件中

javascript - 单击 HTML 内的链接时无法将 HTML 加载到 HTA 文件中

问题描述

我有一个 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 文件的内容是：

索引.html

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

第二个.html

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

第三个.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 正文的底部并添加一个用于加载 HTML 的 div

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

问题仍然存在

标签： javascripthta

解决方案

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();

推荐阅读