<object> onload not firing in Chrome - javascript

Loading a PDF in an <object> tag, I want to show an indicator while the document is being loaded instead of just an empty element, so I positioned a Load Panel over the <object>. I added a function to hide the panel:
function documentLoaded() {
// Code to hide panel here.
}
And set it to fire in the onload event of the <object> tag:
<object type="application/pdf" data="/documents/sample.pdf" onload="documentLoaded();"></object>
This is working exactly how I want it to in Firefox and in Edge, but when I tested it in Chrome the Load Panel never went away. When I debugged it I saw that the documentLoaded() function was never called at any point.
Is there another way to get this to work with Chrome, or another way completely to call a JS function once the PDF is ready?

document.querySelector('#load_panel').onload=documentLoaded()

Related

load eventlistener doesn't fire in webkit for svg image element

This is verrrrry similar to some existing questions:
javascript, image onload() doesnt fire in webkit if loading same image
image.onload event and browser cache
Except that instead of trying to load an html image, I'm working with a svg image. I have a SVG element on the page and a variable containing a data URI string. I want to create a image element, set it to display the data URI, and add it to the SVG element on the page. Here's my code:
var svg=document.getElementsByTagName('svg')[0]
var placed=document.createElementNS("http://www.w3.org/2000/svg", 'image')
placed.addEventListener('load',function(){
alert('loaded')
})
placed.setAttribute("href",test)
placed.setAttribute("x",100)
placed.setAttribute("y",100)
placed.setAttribute("height",100)
placed.setAttribute("width",100)
svg.appendChild(placed);
Where test is the data URI. This fires appropriately in Firefox and Chrome (and the image loads fine). It does not fire in Safari. I assume this is the same issue as the SO questions I linked above but trying to 'clear' the variable as suggested in some of those answers doesn't seem to do anything and I'm wondering if I need to do something more.
Here's a fiddle that should work great in Firefox/Chrome, not so great in Safari:
https://jsfiddle.net/362pbcLn/
If this is in fact the same caching issue, what do I need to do to clear the variable and get Safari to trigger the load listener?
For Safari (and Firefox) you need to change the href setter to
placed.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",test)
Firefox will likely support the simplified href only syntax fairly soon but there's no reason to use it the line above works on Chrome and IE Edge too.

Setting content of iframe using javascript fails in firefox

I'm trying to set the content of a iframe using javascript.
I've the html string. And I'm writing:-
var iframe = $('iframe')[0],
content = '<div>test</div>';
$(iframe).contents().find('html').html(content);
It works fine in google chrome, but in firefox is shows the content for a moment and the disappears.
Please help me to fix it.
I faced the same problem. I saw the load function of iframe fires in firefox but not in chrome. So firefox reload the iframe again on load event.
So with your existing code try this:-
$(iframe).load(function(e){
$(iframe).contents().find('html').html(content);
})

jQuery .empty() with iframe whose src is a pdf breaks plugin in internet explorer

In Internet Explorer 8-10, if I have an iframe whose source is a PDF, and that Iframe is wrapped in a div, and I call jQuery.empty() on that wrapping div, there seems to be some sort of interaction between the PDF plugin and IE that causes the plugin to break, become non-interactive (unable to do anything with regard to the document after removal from the DOM), and in some occasions ignore scrolling, floating above the page.
Sample Code:
<button id="remove">remove</button>
<div style="height:2000px">
<div style="height:500px; width:800px;" id="embedDiv">
<iframe style="width:100%; height:100%;" src="somepdf.pdf"></iframe>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#remove").click(function () {
$("#embedDiv").html("Some Content!");
});
});
</script>
Working example can be found at http://jsfiddle.net/j2e56/
Is there any way to hide/remove this embedded pdf after .empty() has been called? I'm working in an environment where I really don't know how or when my frame will be removed from the page, and I have no control over how it will be removed. I can use setInterval to check periodically whether the iframe is still on the document after the fact, but I'm not sure how to do that.
Setting the src attribute on the frame to '' or 'about:blank' will work before empty() has been called, but it seems to not have any effect afterward which is where I seem to be stuck in this case.
Ok, this isn't the perfect solution but it works for right now.
The solution would be to attach to onbeforeunload, but the problem is IE won't honor those callbacks once it has been transformed to a pdf iframe. So what I did was add a sort of 'canary' iframe right before the pdf iframe in the document, and attach to unload on that one. When an unload situation is detected, the canary unload callback sets the src to '' on the pdf iframe so it can be unloaded successfully.
Note that this will only work when you use .empty() prior to any call to html().
Edit: This is wrong, it only works if you call it against the iframe's direct parent and not anything above that.

IE9 "Invalid calling object" when printing PDF in iframe

I'm opening an editable form PDF (opened via the acrobat plugin) in an iframe:
<iframe name="iframe_content" id="iframe_content" src="mypdf.pdf"></iframe>
There is a button that calls the following print function:
function printContent(){
window.frames["iframe_content"].focus();
window.frames["iframe_content"].print();
}
It works in Chrome, Safari, IE8, but not in IE9.
In IE9 i receive the following error in reference to the printContent() function:
Invalid calling object
I think this may be the trick to getting it to work, but I'm not sure how to make window.frames fit within this structure: http://msdn.microsoft.com/en-us/library/ie/gg622930%28v=vs.85%29.aspx
UPDATE: Decided that for this single page the simplest solution was forcing the browser into IE8 compatibility mode using the <meta> tag and X-UA-Compatible
You must put your print function inside the Iframe's page and call it from the parent page.
in Iframe:
function printMe() {
window.print()
}
in parent (assuming this is the first iframe on your page):
frames[0].printMe()

Strange jQuery $(window).load() behavior in Safari

I have a page being loaded in an <iframe>.
Inside the <iframe>, I have a function that patiently waits for the page to load using jQuery's $(window).load() event which is supposed to wait until ALL page content (images, javascript, css, etc.) is loaded before firing.
The function then calls back to the page loading the <iframe> using postMessage to send the height of the content in the <iframe> back.
I have tested the functionality in IE7, IE8, Firefox 2, Firefox 3, Opera, and Chrome and everything works fine. When I try to load the page in Safari, the function makes its call back before images are loaded...thus giving me the wrong page height.
Does anybody out there know how to force Safari to wait for images to be loaded before calling a function (jQuery solutions are preferable in this case)?
Checking for an offset forces safari for finish loading/layout out the content, it blocks javascript until the return completes. You can use it like this:
$(window).load(function() {
var block = document.body.offsetWidth;
//Rest of code...
});

Categories

Resources