Iframe content not loading
I’m currently trying to get an iframe to display documents when clicked upon. There are currently four links that use to workl and I’m trying to get two out of the four are working that where broken. The iframe code that I’m using is:
If you have simply replaced the characters in the src with «x» for StackOverflow then your URL format is completely invalid
I did replace the src with x’s for StackOverflow. This code is the same code that was used when the site was originaly made. I’m just trying to get the documents to display again after the page was deleted on accident. Also I was not the one to create the page. Also if you could show me the correct code it would be greatly appreciated
2 Answers 2
Copy and Paste the contents of src into your navigation bar in your browser. What do you get? If that url doesn’t work (and I’m guessing it wont), then you need to find the correct url path to these files. You can perhaps do this by simply searching for the files with the search on your machine. This may work, but I’m not sure that other users will be able to navigate to the files because (and any one feel free to correct me if I’m wrong) file:// url paths will only point to files on your machine. You might have upload these files to the server.
Not a problem. The files are located on our server and I’m trying to get them to display when the link it clicked upon in the intranet for the company. I’m just really confused, because the code that is posted above is working on two active links, but not the two that i had to remake.
okay, then you will have to locate those files and copy the url and paste it into the src=»https://stackoverflow.com/questions/12712659/» line of your code. Are you using windows or mac?
Ok, so i applied the correct url in src=»https://stackoverflow.com/questions/12712659/[correct%20URL]». But it still will not show the files I need it to show. Under the preview option I have available i can see the files, but when i click save and navigate back to it, I get nothing
I tried the URL again just to make sure it was not something i did. the URL without the file:// will not work, but when the file:// is added it works
Why iframe is not loaded for same url as page
I was just testing some stuff and came across the interesting iframe behavior. On the page i have the following iframe :
Now, if the src of iframe is the same as url of the page (. /Wizard/Start) , the iframe does not load the contents, just remains blank and there is no errors, warnings or anything reported. I can see that this is by design, acts the same in all browsers. Why? Any official documentation on this behavior?
Try to use some kind of Network profiler, and check what URL is actually loaded (Hit F12 to get to the debugging console)
No url is loaded, it seems that if browser encounters iframe with url=pageurl just ignores the further processing
Possibly, the reason for this is to prevent infinite recursion, but I can’t find anything official on this subject
2 Answers 2
This is indeed the specified behaviour. The answer to your question is in this document:
In the section «Infinite Recursion» it says:
Infinite recursion is prevented. Any frame that attempts to assign as its SRC a URL used by any of its ancestors is treated as if it has no SRC URL at all (basically a blank frame). This doesn’t prevent all malicious documents, but it eliminates a troublesome class of them.
The document dates back to 1997 but hasn’t been superseded yet, as far as I know.
@David, right, but Chrome doesn’t allow it inside iframe. In other words, in Chrome, one-level recursion allowed only.
you mean you are loading the iframe of «abc» page of abc page??
_____________________ | | | IFrame | ---------------------| | | | Page | | | _____________________ and here iframe again pointing to the same page right?? see it will not work as it become the infinite loop..
you are trying to load the same page in iframe.. mean the content of iframe again contains another iframe which again pointing to the same page which again has the iframe.. so it will be infinite loop and thats why it will not work..
on page «xyz» you can include the iframe of «abc», it will not be a problem
How can I handle errors in loading an iframe?
I have an
showIFrame = function() < var iframe = document.createElement('iframe'); iframe.id = 'myIFrame'; iframe.src = 'http://myserver.com/someURLThatFailsToLoad'; iframe.onError = iframe.onerror = myHandler; document.body.appendChild(iframe); >; myHandler = function(error) < document.getElementById('myIFrame').style.display = 'none'; console.error('Error loading iframe contents: ' + error); return true; >; If my server returns a 404 I just get the contents of the not-found page in my
3 Answers 3
To detect whether your server is down or not, you can include an empty script file from your own domain. When the server is down, the onerror event handler will fire:
var el = document.createElement('script'); el.onerror = errorFunction; el.src = "somebogusscript.js?" + new Date().getTime(); document.body.appendChild(el); Note: don’t forget to add a random string to the src attribute to avoid the client using a cached version (which could stop a look at the server at all).
Detect failure to load contents of an iframe
Is there some way I can reliably determine if either of the above errors occurred?
I’m writing a semi-web semi-desktop application based on Mozilla/XULRunner, so solutions that only work in Mozilla are welcome.
8 Answers 8
If you have control over the iframe page (and the pages are on the same domain name), a strategy could be as follows:
- In the parent document, initialize a variable var iFrameLoaded = false;
- When the iframe document is loaded, set this variable in the parent to true calling from the iframe document a parent’s function (setIFrameLoaded(); for example).
- check the iFrameLoaded flag using the timer object (set the timer to your preferred timeout limit) — if the flag is still false you can tell that the iframe was not regularly loaded.
1) Why bother adding JavaScript to the iframe page? I could just as easily use setTimeout in conjunction with the load event. 2) This doesn’t reliably detect if load fails or why, just whether it succeeds within a time limit. 3) Doesn’t detect the case where page dependencies fail to load.
Different resources will load in different time frames. That unpredictability will kill your approach Daniel Cassidy, since you’ll have to allow for a reasonably long timeout. In the meantime, short-lived load errors will just hang on screen until the timer assumes the resource failed to load and handles the error.
This is a very late answer, but I will leave it to someone who needs it.
Task: load iframe cross-origin content, emit onLoaded on success and onError on load error.
This is the most cross browsers origin independent solution I could develop. But first of all I will briefly tell about other approaches I had and why they are bad.
1. iframe That was a little shock for me, that iframe only has onload event and it is called on load and on error, no way to know it is error or not.
2. performance.getEntriesByType(‘resource’). This method returns loaded resources. Sounds like what we need. But what a shame, firefox always adds Resource in resources array no matter it is loaded or failed. No way to know by Resource instance was it success. As usual. By the way, this method does not work in ios
3. script I tried to load html using tag. Emits onload and onerror correctly, sadly, only in Chrome.
And when I was ready to give up, my elder collegue told me about html4 tag . It is like tag except it has fallbacks when content is not loaded. That sounds like what we are need! Sadly it is not as easy as it sounds.
CODE SECTION
var obj = document.createElement('object'); // we need to specify a callback (i will mention why later) obj.innerHTML = ''; // fallback obj.style.display = 'block'; // so height=5px will work obj.style.visibility = 'hidden'; // to hide before loaded obj.data = src; After this we can set some attributes to like we’d wanted to do with iframe . The only difference, we should use , not attributes, but their names and values are identical.
Now, the hard part. Like many same-like elements, doesn’t have specs for callbacks, so each browser behaves differently.
- Chrome. On error and on load emits load event.
- Firefox. Emits load and error correctly.
- Safari. Emits nothing.
Seems like no different from iframe , getEntriesByType , script . But, we have native browser fallback! So, because we set fallback (innerHtml) directly, we can tell if is loaded or not
function isReallyLoaded(obj) < return obj.offsetHeight !== 5; // fallback height >/** * Chrome calls always, Firefox on load */ obj.onload = function() < isReallyLoaded(obj) ? onLoaded() : onError(); >; /** * Firefox on error */ obj.onerror = function() < onError(); >; But what to do with Safari? Good old setTimeout .
var interval = function() < if (isLoaded) < // some flag return; >if (hasResult(obj)) < if (isReallyLoaded(obj)) < onLoaded(); >else < onError(); >> setTimeout(interval, 100); >; function hasResult(obj) < return obj.offsetHeight >0; > Yeah. not so fast. The thing is, when fails has unmentioned in specs behaviour:
So, code needs a little enhancement
var interval = function() < if (isLoaded) < // some flag return; >if (hasResult(obj)) < if (isReallyLoaded(obj)) < interval.count++; // needs less then 400ms to fallback interval.count >4 && onLoadedResult(obj, onLoaded); > else < onErrorResult(obj, onError); >> setTimeout(interval, 100); >; interval.count = 0; setTimeout(interval, 100); Well, and to start loading
document.body.appendChild(obj); That is all. I tried to explain code in every detail, so it may look not so foolish.
P.S. WebDev sucks