View file in iframe (Word, PowerPoint, Excel) using jQuery

Question

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?

Why aren't you using `$('.navLink').click()` instead of `$(document).click()`? — ArtOfCode, Aug 22 '14 at 20:04
Because the links are created dynamically with PHP and I want to make sure I get them. — user2571510, Aug 22 '14 at 20:07
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, Aug 22 '14 at 20:08
@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, Aug 22 '14 at 20:10
$('.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, Aug 22 '14 at 20:14
He, he, too many var statements? But ignore ++ warning. It's just Douglas' coding style and doesn't apply to >99% of the crowd. — Remigijus Pankevičius, Aug 22 '14 at 20:21
**Edit:** If this approach does not work is there a way to embed an MS office document in an HTML website ? — user2571510, Aug 22 '14 at 20:28

score 5 · Answer 1 · edited May 23 '17 at 10:26

5

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.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 22 '14 at 20:05

uncoder

1,818
1
17
20

Thanks - this is very helpful ! Would it work if I use Ajax / PHP and replace the parent div on the fly ? – user2571510 Aug 22 '14 at 20:08
Thanks - let me check on that. – user2571510 Aug 22 '14 at 20:09
Just long-dragging years of experience. :( – uncoder Aug 22 '14 at 20:11

View file in iframe (Word, PowerPoint, Excel) using jQuery

Edit

1 Answers1