Question

我有一个位于目录中的网站。在特定的用户操作上，网站的javascript需要从位于主网页的直接子目录中的“外部”HTML文档中获取正文。

例：
主要网页目录
| ___ TutorialFiles（'外部'HTML文档子目录）

当用户点击链接时，它会执行其OnClick（）javascript函数以下是我想要使用的内容，但它不起作用。

function DisplayDocument(thisDoc) {
    //alert("Display " + thisDoc + " Doc Here!");

    var loc = window.location.pathname;
    var dir = loc.substring(0, loc.lastIndexOf('/'));

    var HTMLDoc = "./TutorialFiles" + "/" + thisDoc;

    var HTMLDocContent = getBody(HTMLDoc);
    document.getElementById("page_content_wrapper").innerHTML = getBody(HTMLDocContent);
    return false;
}

function getBody(content) { 
   var x = content.indexOf("<body");
   x = content.indexOf(">", x);    
   var y = content.lastIndexOf("</body>"); 
   return content.slice(x + 1, y);
}

上面的javascript代码没有“看到”子目录TutorialFiles中的外部文档，因此无法获取其“正文”。

我做错了什么？

由于

Answer 1

您可以使用XMLHttpRequest加载html文件。这是一个基于您的代码的代码片段，它将外部html加载到页面中。

要适应您的情况，只需将serverPath更改为您自己的服务器，它应该有效：

var serverPath = 'https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/dist/';

var loadHtml = function(path, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', path, true);
  xhr.onreadystatechange = function() {
    if (this.readyState !== 4) return;
    if (this.status !== 200) return;
    callback(this.responseText);
  };
  xhr.send();
};

var displayHtml = function(file) {
  loadHtml(serverPath + file, function(html) {
    document.querySelector('.page_content_wrapper').innerHTML = html;
  });
  return false;
};

<button onclick="displayHtml('index.html');">Load html</button>
<div class="page_content_wrapper"></div>

Answer 2

好吧，当所有的建议都没有按照我的要求行事时，我最终解决了这个问题。

我最终使用了一些代码，这些代码已经在控制我的补充工具栏菜单onClick（）事件中。我没想过用它来增加这个功能，但它确实有效。

补充工具栏onClick = MenuClick（'TutorialFiles /'＆amp;＆amp;'，'＆amp;＆amp;“'）”

因此，使用codebehind searchBtn（）函数，我只是将搜索结果中找到的链接的onClick（）方法构建为相同的东西，它开始工作。

    //--- Function to Load 'External' HTML Page (doc) into Content Wrapper ---
    function MenuClick(doc, displayText) {
        var MasterPgPrefix = "";
        var titlebox = document.getElementById(MasterPgPrefix + 'txtTutorialTitle');
        titlebox.value = displayText;
        titlebox.style.visibility = "visible";
        titlebox.style.display = "block";

        var Tutorial = doc;
        var DisplayObj = "<object id='ThisObj' type='text/html' data='" + Tutorial + "' style='min-width:100%; min-height: 101%; overflow: hidden'></object>";
        document.getElementById("page_content_wrapper").innerHTML = DisplayObj;
    }

感谢您的建议和意见。

Javascript - 获取'外部'HTML文档正文

2 个答案: