0

I am using an <object> tag to display document previews on my website. Essentially, I pull out the document URL and type from my database, and give it to the <object> tag as follows:

<object data="url" type="type" width="100%" height="100%">
 <p>Fallback in case the browser couldn't display the document</p>
</object>

Every time the user selects a different document, I just replace the two parameters on the same <object> tag (it's placed in a modal window).

Everything works fine, swapping documents works flawlessly, as long as the browser can render the documents (so, for example, moving from image/jpeg to application/pdf and back is fine). However, as soon as one document cannot be rendered by the browser for any reason (e.g. the user doesn't have a PDF plugin), then all the following documents don't work either.

Is there any way I can reset the <object> tag, to be able to start showing documents again, without refreshing the page?

Otherwise, do you have any other suggestions to implement a document viewer other than with an <object> tag?

Thank you very much!

Improve this question
2
  • have you used something like try and catch... you could use $(object_id).html() trying to reset it....
    – Guilherme Silva
    Commented Jul 30, 2015 at 15:20
  • @GuilhermeSilva, what do you mean? Could you please provide an example? Thanks!
    – nzapponi
    Commented Aug 3, 2015 at 8:00

1 Answer 1

Reset to default
1

Solved by cloning the <object> element and injecting it into the DOM multiple times.

With jQuery:

var el = $("object");
el.clone().appendTo(el.closest("div"));
el.remove();

Thanks to @GuilhermeSilva for the input.

Improve this answer

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