I have an HTML page that has a number of links displayed via dropdowns / unordered lists on top of the page (using a Bootstrap 3 navbar). These links go to MS Office documents (Word, Excel, PowerPoint) that are hosted on an internal server.

By click on the links I would like to have them open within an iframe on the same page instead of using separate pages or downloads.

I tried the below but this always opens me the standard popup to either save the file or open it in a separate window.

Can someone tell me what I am doing wrong here? E.g. something in addition to refresh the iframe?

My HTML for the link dropdown (just one item):

<li type='disc'><a href='javascript:void' class='navLink' name='test.pptx'>Text</a></li>

My HTML for the iframe:

<iframe src="#" width="100%" height="auto" frameborder="0" id="iView" name="iView"></iframe>

My jQuery:

$(document).on('click', '.navLink', function() {
    var fileName = $(this).attr('name');
    var fileLocation = 'http://somefilepath/uploads/';
    var fileSource = fileLocation + fileName;
    $('#iView').prop('src', fileSource);
});

Edit

If this approach does not work is there a way to embed an MS office document in an HTML website?

I have an HTML page that has a number of links displayed via dropdowns / unordered lists on top of the page (using a Bootstrap 3 navbar). These links go to MS Office documents (Word, Excel, PowerPoint) that are hosted on an internal server.

By click on the links I would like to have them open within an iframe on the same page instead of using separate pages or downloads.

I tried the below but this always opens me the standard popup to either save the file or open it in a separate window.

Can someone tell me what I am doing wrong here? E.g. something in addition to refresh the iframe?

My HTML for the link dropdown (just one item):

<li type='disc'><a href='javascript:void' class='navLink' name='test.pptx'>Text</a></li>

My HTML for the iframe:

<iframe src="#" width="100%" height="auto" frameborder="0" id="iView" name="iView"></iframe>

My jQuery:

$(document).on('click', '.navLink', function() {
    var fileName = $(this).attr('name');
    var fileLocation = 'http://somefilepath/uploads/';
    var fileSource = fileLocation + fileName;
    $('#iView').prop('src', fileSource);
});

Edit

If this approach does not work is there a way to embed an MS office document in an HTML website?

• javascript
• jquery
• html
• iframe
• src

• Why aren't you using $('.navLink').click() instead of $(document).click()? – ArtOfCode Commented Aug 22, 2014 at 20:04
• 2 If they've all got the same class, that handler will still catch them all without having to react to every click on the page, which uses memory. – ArtOfCode Commented Aug 22, 2014 at 20:08
• 1 @ArtOfCode is right. Try to use document as little as possible when your calling any kind of event. I've seen it backfire many a times. – zazvorniki Commented Aug 22, 2014 at 20:10
• 1 $('.navLink').click() won't solve your issue but it will yield a bit more readable code. But from your code style I see you don't have issues with it except that you don't use (a must for JS developers) jslint. – Remigijus Pankevičius Commented Aug 22, 2014 at 20:14
• 1 Will show obvious errors. – Remigijus Pankevičius Commented Aug 22, 2014 at 20:15

1 Answer 1

The problem is that your web server returns your files with ''Content-disposition: attachment'' HTTP header. That prompts the Save As/Open dialog to popup. What you want is inline attachments instead.

More info here:

Content-Disposition:What are the differences between "inline" and "attachment"?

Note: that cannot be handled on the client (i.e. via JS), you will need to modify your server app.