Javascript - Get 'external' HTML document body

0
votes

I have a website which resides in a directory. On a particular user operation that website's javascript needs to get the body from an 'external' HTML document which resides in an immediate subdirectory of the primary webpage.

Example:
Primary webpage directory
|___ TutorialFiles (the 'external' HTML document subdirectory)

When the user clicks on a link it executes its OnClick() javascript function.
The following is what I am trying to use, but it is not working. 

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

That above javascript code does not 'see' the external document in the subdirectory TutorialFiles and therefore cannot get its 'body'.

What am I doing wrong?

Thanks

2
javascripthtml
At no point are you actually loading the HTML source code of the second document. You have to use AJAX for that. (Your function, the one that looks for <body, receives the path to the document, not magically its contents. You're also calling the function twice.) – Chris G

2 Answers

0
votes

You can load the html files using XMLHttpRequest. Here is a code snippet based on your code that loads an external html into the page.

To adapt to your case simply change the serverPath to you own server and it should work:

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>
0
votes

Well, once again when all of the suggestions did not do what I needed, I ended up resolving the issue myself.

What I ended up with used some code that was already working for me in controlling my Sidebar menu onClick() events. I had not thought to use that for this additional functionality, but it worked.

The Sidebar onClick=MenuClick('TutorialFiles/' & & ',' & & "')"

So with a codebehind searchBtn() function I merely built the the onClick() methods for the links found in the Search results to the same thing and it began working. 

    //--- 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;
    }

Thank you for your advise and suggestions.