Cannot embed .doc,docx files in google doc viewer

Question

I have my code to embed files in page and open in Google Docs Viewer. but so far I get "No preview available" when i want to open .doc or docx files but opens correctly when I open PDF files. And again instead of opening the file in Google Docs I'm prompted to download the file instead of viewing it on the browser.

Here is my code:

<a href="sample.doc"  class="embed"><h2>sample.doc</h2><button >view document</button></a>
<script>
    $(document).ready(function() {
      $('a.embed').gdocsViewer({width:740,height:742});
      $('#embedURL').gdocsViewer();
    });
</script>

And here is my jQuery plugin:

(function($){
    $.fn.gdocsViewer = function(options) {

        var settings = {
            width  : '600',
            height : '700'
        };

        if (options) { 
            $.extend(settings, options);
        }

        return this.each(function() {
            var file = $(this).attr('href');
            var ext = file.substring(file.lastIndexOf('.') + 1);

            if (/^(tiff|doc|ppt|pps|pdf|docx)$/.test(ext)) {
                $(this).after(function () {
                    var id = $(this).attr('id');
                    var gdvId = (typeof id !== 'undefined' && id !== false) ? id + '-gdocsviewer' : '';
                    return '<div id="' + gdvId + '" class="gdocsviewer"><iframe src="http://docs.google.com/viewer?embedded=true&url=' + encodeURIComponent(file) + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;margin : 0 auto; display : block;"></iframe></div>';
                })
            }
        });
    };})( jQuery );

Answer 1

NOTE: please read full answer including the edits down below

Google Docs Viewer seems to work just fine. For testing purposes, I've used this document: http://homepages.inf.ed.ac.uk/neilb/TestWordDoc.doc

Visiting https://docs.google.com/viewer?embedded=true&url=http%3A%2F%2Fhomepages.inf.ed.ac.uk%2Fneilb%2FTestWordDoc.doc directly from a new tab results in the standard Google Docs Viewer without a problem.

Testing it from inside an iframe works the same way:

<iframe src="https://docs.google.com/viewer?embedded=true&url=http%3A%2F%2Fhomepages.inf.ed.ac.uk%2Fneilb%2FTestWordDoc.doc" frameborder="no" style="width:100%;height:160px"></iframe>

In conclusion,

Google has changed nothing in Docs Viewer. My guess is that you are not using an absolute URL in your href tag. So, in your code, change the first line to something like this:

<a href="http://www.yourwebsite.com/directory/sample.doc" class="embed"><h2>sample.doc</h2><button >view document</button></a>ç

---

EDIT

If the previous code doesn't work for you, try the newer Google Drive viewer by replacing the iframe code with this:

<iframe src="https://docs.google.com/viewerng/viewer?url=YOUR_DOCUMENT_URL"></iframe>

---

EDIT 2 (2019)

Google Docs Viewer seems to load documents half of the time, having to reload the iframe in those occassions until it displays properly. For this reason, it may be better to use the Office Web Apps Viewer as an alternative:

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fhomepages.inf.ed.ac.uk%2Fneilb%2FTestWordDoc.doc" frameborder="no" style="width:100%;height:500px"></iframe>