Loading a non WordPress HTML page into WordPress

An existing page from some time ago (before WP) needed loading into a page in WordPress. While there are several ways to accomplish this I wanted the result to appear seamless. ie. No borders or scrolling required.

The source HTML contains references to a relative directory ‘vietnam_files’. It was necessary to alter the path to this directory as this reloading changes the path, thinking they must be beneath the WP root. This is where the use of innerHTML.replace() comes in. It substitutes the full path for the relative one. Here is the result.

This code was the result:-

<iframe style="height:0px; width:0px; visibility: hidden" id="SourceObject" type="text/html" src="/~ianm/vietnam.html" onload="iframeReady()"></iframe>
<div id="LocalDiv"></div>

iframeReady = function() {
  LocalDiv.innerHTML = sourceObject.contentDocument.getElementById("VietnamContent").innerHTML.replace(/vietnam_files/g,'/~ianm/vietnam_files');
var sourceObject = document.getElementById('SourceObject');
var localDiv = document.getElementById("LocalDiv")



Leave a Reply