Precondition:
I have an aspx-page with iframe inside. This iframe points to the url handled by MVC on the same site (it's hybrid site, both standard ASP.NET and ASP.NET MVC). The resulting page rendered by MVC contains a lot of scripts references.
Problem:
IE9 throws an exception on every single script it load in iframe. These exceptions are similar to this one:
Error: 'Function' is undefined
That is, it says that the most basic things every window has is somehow absent. Once you clicked through all of these popups, the page just works as designed!
If I load a URL from <iframe /> src attribute in the browser directly, everything works as expected.
If I open the page in another browser (I tried Opera, Firefox), everything works as expected -- no errors.
So, what IE9 wants?
There is this msdn page about this bug (or feature).
You get these kinds of errors when you move the iframe element around in DOM. In such cases, IE 9 garbage collects the iframe (causing your undefined bug) and reloads it at another position.
In general, you should create the element, set its src attribute only once and then put it somewhere in the DOM tree once. It has nothing to do with the code which runs in the iframe itself.
I have encountered this same situation in the wild. Basic symptoms:
You load script code in an iframe
The script code runs early (from the head section or top of body)
IE complains about some missing native object
I found that it can often be prevented by delaying the execution of the script code until onload or DOMContentLoaded... Not much help I know but this is one of the most difficult IE scripting bugs I have ever encountered. I upped the score of your question, hope it will be found by others as well and we can get a more detailed answer.
Also see this question:
Error in Internet Explorer 9 (not earlier versions or other browsers) when including jQuery in an iframe
Placing the following script block at the very top of the iFrame html <head> seems to resolve the issue in my case. Basically, it forces the iframe to reload, which as some have pointed out, solves the issue. It seems relatively safe, because, without things like 'Object' and 'Date', javascript is essentially useless.
<script type="text/javascript">
if(typeof(Object)==="undefined"){
window.location.reload();
}
</script>
Try loading the javascript at the end after complete web page is loaded. I feel the script is executing even before the iframe is completely loaded.
for some suggestion of scripting in IE9 view the given link below
http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more.aspx
Further investigation revealed that the solution is to add the offending iframe to it's dom location BEFORE setting the 'src' attribute.
Once the 'src' has been set, changing location of the iframe within the DOM stack forces IE9 to garbage collect it.
Once 'src' has been set, iframe can be resized and changed via css positioning, but cannot change the relative location in the DOM stack.
Often times, plugins like dialogs and lightboxes will stuff an iframe with src already set into the dom, then append / prepend or whatever, triggering the GC to take place.
function waitForjQuery(){
if(typeof jQuery!='undefined'){
//Do yor stuff!
}
else{
setTimeout(function(){
waitForjQuery();
},500);
}
}
waitForjQuery();
Related
I'm working on a WebExtension that scrapes some data from a web page. The page in question dynamically loads stuff into an iframe, and the iframe contains the stuff I need. The data I need never gets written to the iframe document, it only exists in the JS objects.
From inside of my WebExtension, I'm trying to do the following:
var result = $("iframe")[0].contentWindow.eval("(function() { return $('#grid').jqxGrid('getrows'); }())");
This works flawlessly when using the extension in Firefox. No issues whatsoever.
Unfortunately, trying to do the same thing in Chrome results in the error $ is not defined on the eval.
I've been trying for the last couple of hours to figure out why and I'm at a complete loss. Would really appreciate if someone could point me in the right direction.
I'm still not sure why the eval() works in Firefox but not in Chrome, but here's what I ended up doing to get what I needed:
1) Add an event listener in my extension for a custom event.
window.addEventListener("myCustomEvent", function(e) { HandleResult(e.detail); });
2) Inject a script block with the code to fire the event, including the data I need, into the body of the iframe document.
$("body", $("iframe").contents()).append("<script>top.dispatchEvent(new CustomEvent('myCustomEvent', {detail: $('#grid').jqxGrid('getrows') }));</script>")
Shout-out to wOxxOm for pointing my brain in the right direction.
This answer https://stackoverflow.com/a/10929430/749227
to this question Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool? is spot on for debugging dynamic scripts.
The issue I am facing is that I have a page that has a script on it, and after it loads an ajax request fires which returns with some HTML and a script that get put into the page. With the //# sourceURL=myDynamicDocumentFragment.html bit added, I can debug the dynamic script just fine.
But once it's loaded, then the other script that is part of the outer page that initially loaded goes off the rails. I can set breakpoints on blank lines and can't set them on legitimate lines. The debugger will stop on them but it won't be at the place in the code where I'd expect.
What it appears to be is that the dev tools window is showing the original script, and the debugger itself is running on something else - some updated version of code that includes both the outer page's script and the dynamic script that was added later. Or maybe it just hiccups with respect to line numbers it's displaying and what those map to in the code it's actually running.
I wish I had a good simple code snippet to demonstrate the issue, but I don't. Has anyone seen this, and does anyone know of a way to have Chrome 'refresh' the dev tools scripts/debugger without refreshing the page? (it has to be w/o refreshing the page since things work fine when the page loads - it's only after the dynamic script is dropped in that the wheels come off)
Note: I've tagged with Chrome since that's what I'm using (v 38). I don't know how other browsers fare.
You can find scripts injected into head or evaluated, here is a break point added on youtube evaluated (another js file).
You can find this in chrome as well, adding console.log (click on message shown), and voila you have source code you can add break points.
Here mozila print debugging/breakpoint over evaluated script on utube page:
Update
Sorry, I understand chrome was out of the scope, my engrish :)
How I did debugging on chrome over injected scripts, but there are cases when you cannot attach to execution if script is active (page load plus few milliseconds), you need to search for workarounds.
Added this at the begin of the script injected:
//# sourceURL=jseinjectedsource.js
console.log("evaluated");
and voila console:
Better check this way better than my explanation chrome developer
Check to see if your script is using a source map (if you're using TypeScript this is typically on by default for VS projects).
I've found Chrome to be really bad with source maps, often refusing to update them, or stop displaying them after the source map line is removed from the code.
I am trying to load an iframe, get an part of his content and delete the iframe.
My solution works on FF, Chrome but fails sometimes in all IE versions.
When I load an page in browser I see the its full content, but when I load exactly the same page in iframe there are missing elements from the page.
I've tried to add the iframe by hand from console and sometimes the page load all its content ,some times it doesn't.
Does anyone have a clue why does this happen?
i believe that not declaring DOCTYPE (in both the iframe source and the parent) can cause issues like that.
undeclared doctypes can cause the browser to revert to quirks mode
EDIT: I've identified a link to the below problem to the use of $(document).ready() instead of using the old fashioned onload attribute of the body
The problem
In IE7 the canvas/excanvas does not render until you hit reload -- I've cleared my cache multiple times, and the result is consistent.
The canvas is always empty on initial page load, and an error comes up "object does not support this property or method" -- a message that refers to the .getcontext() call. However, once I hit reload, it magically works. Always after a reload.. it works. never by any other means of reaching the page does it work. There is always an error on initial page load.
By "initial page load" i mean when the page loads from a clicked link, a manual entry to the address bar or via the back/forward buttons.
Here's a reproduction:
http://www.trevorsimonton.com/canvas_problem/example7.html
Note that there's a lot of extra Javascript in there to reproduce the Drupal environment where this problem originated.
The code
I am using excanvas r3 -- http://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip and Drupal 6
EDIT: I removed a bunch of the code I had, because I have 2 places on the site where I am handling canvases completely differently. I was able to reproduce the problem at the destination above (http://www.trevorsimonton.com/canvas_problem/example7.html)
The root of the question
Does anyone know more about how excanvas or IE7's behavior that might trigger this kind of issue? What, aside from the browser's cache, could be causing the page to load differently between a "reload" command and anything else?
Because this is Drupal 6 I'm using Jquery 1.3.2
Apparently $(document).ready() fires before excanvas is really ready. Although that's not the case in most browsers, of course IE is going to be different.
IE7 needs all calls to getContext() to originate from a function passed into the body tag's onready attribute.
Do do this in drupal is a little tricky, but I just hard coded it into the page template.
See this if you want the full how-to: excanvas and JQuery 1.3.2 document ready don't get along
I am trying to load a webpage using prototype.js in the header after the title.
I keep on getting an exception in the prototype.js within the CoreWrapper function, where the
eventID is seen as a null.
This only happens once and then seems to be okay, thereafter. I have noticed that there is no problems loading the same webpage using Firefox.
Scanned on websites and looked for any possible updates for the javascript (1.6.0.3). Seems that the DOM Object is not loaded? Any ideas of how you can do this for internet explorer?
Please simplify this as I am very new to javascript :-)
Well, without code it's hard, but it might be because you don't wait until the DOM to be loaded or the complete page to be loaded before using some DOM functions. To wait for it just do something like this :
Event.observe(window, 'load', function(){
//your code here
});