9

I'm trying to host a static site on SharePoint (my clients requirement). I have Office 365 and I've setup a site in that, but I am unable to view the uploaded html in the browser. Every time I access the index page, it is downloaded. If I read this post (https://community.office365.com/en-us/f/154/t/348975) correctly, the setting to alter this behavior is not in Office 365 SharePoint.

Is this correct? Is there really no way to host a static html page in SharePoint Online ?

  • All the answers were helpful, but the one marked as the chosen one helped the most. I have some additional notes though. First, I had to become a full administrator so I could connect Sharepoint Designer to Office 365. (Maybe this isn't required, but I didn't find a way around it.) Second, I enabled Tree View in my personal site settings so I could go directly to my html (masquerading as aspx) pages. This allowed me to skip setting each page as the home page. – mozillalives Feb 11 '16 at 17:37
  • Hi i have tried this and it works perfectly. Renamed HTML with aspx. but i have some content where we have an audio and select appropriate image which are not working. images are in PNG format. need help on getting images work – Sai Kiran Aug 8 '17 at 13:31
6
  1. In Office 365, I created a new site (not a personal site).
  2. I then opened the site in SharePoint Designer and imported the files into Site Pages.
  3. I renamed index.htm to index.aspx
  4. I right-clicked on index.aspx and set it as the home page.

This works for single html page sites.

For multi-page websites you will need to rename all html files to an extension of aspx and change your links to point to them appropriately.

Edit: I have confirmed personal sites work as well.

1

Using Sharepoint Designer, if I created a HTML page in the root of my site collection, the page opens in the browser as expected. As soon as I dropped it into a document library, it downloads the file. So it looks like you need SharePoint Designer and do not store the files in a document library. This isn't entirely ideal as you lose out on a lot of functionality, but looks like the only way.

The other option would be to use a wiki library.

  • you were able to get this to work with Office 365? – mozillalives Nov 10 '15 at 20:51
  • Yes, this was in Office 365. – Eric Alexander Nov 10 '15 at 20:52
  • I tried what you suggested but I'm still not getting the same results. Whenever I upload an html file it still prompts to download the file. I tried uploading to the root "All Files" and even though I'm admin I am still getting access denied. Could you be more specific about the root of your site collection? Also what settings you have for that? – mozillalives Nov 11 '15 at 18:27
1

This is because the Browser File Handling option in the Web Application General Settings of SharePoint is set to strict by default. The options are permissive and strict,if you change it to permissive it will work. But unfortunately since you are trying in SharePoint online you cannot do that change. The only option for you is to change the file to .aspx or to put the html code inside any wiki page.

  • I tried switching the file extension to .aspx but even though I'm admin I'm still getting "Access Denied". – mozillalives Nov 11 '15 at 18:29
  • Sorry I meant converting it into an aspx page with all the necessary headers. Best option is to copy the html content into a wiki page – Unnie Nov 11 '15 at 18:31
  • ah that's right - I forgot about all those extra tags in aspx. Well either way it still won't let me upload an aspx file. I'll try the wiki page route though, see what I can do. – mozillalives Nov 11 '15 at 18:56
1

I just renamed my file to .aspx.

I created a folder and uploaded all the dependencies like the css, javascript and images in the same way they are linked in the head section of the HTML file.

After the upload, at first there was an error pop up about "Admin" something, I forgotten the exact phrase. But when I returned to view all sites, the file I intended to upload was there. So I tried opening a browser and went to the actual URL {your-sharepoint-url}/Pages/graf/graph.aspx (This is the file I created) and IE and chrome were able to render the page even when I am not signed in as Admin.

1

Yes There Is.

I had a situation where I had over a hundred html pages that will change at a pretty frequent interval, so renaming the extension every time would be a pain.

What I did instead was create a default.aspx page that adds an IFRAME with the content from html pages loaded with XMLHttpRequest. When each page is loaded click events are watched on links so that they can be loaded in an IFRAME on the page as well. I even went as far as to handle the browser state so that a user can go back or bookmark a page.

I uploaded the default page to the root of the document library containing the html pages, To the end user the library appears to work like a Single Page App. Tested in IE11, Edge, and Chrome.

default.aspx

<!DOCTYPE html>
<html>
    <head>
        <style>
            body { margin: 0; padding: 0; overflow: hidden; }
            .content { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; border: 0; }
            #Loading { 
                position: fixed; height:100%; width:100%; z-index:99999; font-size:3rem; font-family: 'Segoe UI', Helvetica, sans-serif;
                background: #000; opacity:.5; color:#fff; text-align:center; padding-top: 42vh;
            }
        </style>
    </head>
    <body>
        <div id="Loading">Loading... </div>
        <script>
var global = {
    cache: {},
    defaultUrl: 'index.html', // set to entry html page
    initialLocation: window.location.href,
    loadUrlParamQueryKey: '',
    loadUrlParamRe: /loadUrl=(.+)(?:&|$)/gi,
    pagePath: '',
}

/** initializes application */
function onInit() {
    var match = global.loadUrlParamRe.exec(global.initialLocation);
    if (match != null) {
        global.defaultUrl = decodeURIComponent(match[1]);
        global.initialLocation = global.initialLocation.replace(global.loadUrlParamRe, '').replace(/\?$/, '');
    }
    global.loadUrlParamQueryKey = ((global.initialLocation.indexOf('?') !== -1) ? '&' : '?') + 'loadUrl=';
    trackPopState();
    openPage(global.defaultUrl, false);
}

function getUrlPath(url) {
    var protocolEndIndex = url.indexOf('://') + 3;
    var lastSeperatorIndex = url.substring(protocolEndIndex).lastIndexOf('/');
    return (lastSeperatorIndex !== -1) ? url.substring(0, lastSeperatorIndex + protocolEndIndex + 1) : url + '/';
}

function openPage(url, addToState) {
    if (global.cache[url]) {
        replaceContent(global.cache[url], url, addToState);
    }
    else {
        document.getElementById('Loading').style.display = 'block';
        var req = new XMLHttpRequest();
        req.addEventListener("load", function (evt) {
            replaceContent(req.response, url, addToState);
            document.getElementById('Loading').style.display = 'none';
            global.cache[url] = req.response;
        });
        req.open("GET", url);
        req.send();
    }
}

function replaceContent(content, url, addToState) {
    if (addToState) {
        var stateUrl = global.initialLocation + global.loadUrlParamQueryKey + encodeURIComponent(url);
        history.pushState({ url: url }, url, stateUrl);
    }
    global.pagePath = url;

    var contentElements = document.getElementsByClassName('content');
    for (let i = contentElements.length - 1; i >= 0; i--) {
        contentElements[i].parentElement.removeChild(contentElements[i]);
    }
    var iframe = document.createElement('iframe');
    iframe.className = 'content';
    document.body.appendChild(iframe);
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write('<base href="' + global.pagePath + '" />');
    iframe.contentWindow.document.write(content);
    iframe.contentWindow.document.close();
    changeLinks(iframe);
}

function changeLinks(iframe) {
    var elements = iframe.contentWindow.document.getElementsByTagName('A');
    for (let i = 0; i < elements.length; i++) {
        changeLinkClick(elements[i]);
    }
}

function changeLinkClick(elem) {
    let hashIndex = (elem.getAttribute('href') || '').indexOf('#');

    if (hashIndex === -1) {
        elem.addEventListener('click', function (evt) {
            openPage(elem.href, true);
            evt.preventDefault();
            return false;
        });
    }
    else {
        elem.addEventListener('click', function (evt) {
            var targetName = elem.getAttribute('href').substring(hashIndex + 1);
            var target = elem.ownerDocument.querySelector('a[name="' + targetName + '"]');
            if (target != null) {
                target.scrollIntoView();
            }
            evt.preventDefault();
            return false;
        });
    }
}

/**
 * watches when history goes backwards and loads the url
 */
function trackPopState() {
    window.addEventListener('popstate', function(e) {
        var url = (e.state && e.state.url) ? e.state.url : global.defaultUrl;
        openPage(url, false);
    });
}

onInit();

        </script>
    </body>
</html>
0

I was just bitten by the same issue in Sharepoint Online. I needed to host a very simple, plain html page with none of the SP boilerplate or libraries.

No matter where in the site I uploaded my html file, when I tried to view it, the browser would just download the file.

The solution? Change the extension from ".html" to ".aspx". Sharepoint serves the file without question, and everything still works.

0

OK, here is what works. create a wiki page and make sure you select the One Column on the Text Layout in the Format Text tab, when you edit the page. Then step in the column with the cursor in edit mode and click Edit Source on Format Text tab. It will give you some HTML, and in the bottom is a paragraph pair "<"p">". Copy your HTML there.

Now keep in mind that MS may remove any or all of your Java Script code, and I have not found an elegant way of using CSS. If you need to embed code, you switch to Insert Tab and click Embed Code. Copy your code there, but again, there is no guarantees MS will not remove it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.