This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery/JavaScript: accessing contents of an iframe
If i run this on my localhost, it works fine, as long as the src if the iframe is on localhost aswell..
But as soon as i get it online, it doesent do a thing...
http://jsfiddle.net/WnwRc/9/
The goal right now is simply to alert the HTML that is loaded in to the iframe.
A security feature in browsers prevents you from accessing certain DOM objects inside iFrames whose document.domain property is different from the accessing iFrame.
If you're trying to do some web scraping or automation via an iFrame, I'm afraid that's not going to work very well.
Here's a quick link with tons of information for iFrame do's and don'ts:
http://softwareas.com/cross-domain-communication-with-iframes
Load Event doesn't bubble as properly as per jquery website
http://api.jquery.com/load-event/
Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.
Related
I have a funny problem that I need to solve. In short the Internet Explorer uses the window.onblur event to focus an element in an iFrame. Because of that it's a recursion and you cannot click anything outside of the iFrame. Problem occurs in IE9, IE10, IE11 (not IE8 and below).
Test it here: Try it (in IE)
Download it here: Download it
My real question is:
Is there a way to overwrite the window.onblur event inside the iFrame from outside the iFrame? Is this a Bug and should I report this somewhere to Microsoft?
Update
Thanks for your help #Jonathan Sampson, this works as can be seen here:
See working example - you must wait until IFrame is fully loaded to be able to overwrite it
I work on the Internet Explorer team and will gladly look into this for you. To answer your question about overwriting the onblur handler in the iframe, this is possible if the two documents share a common domain. In your example, this is the case.
document.querySelector( "iframe" ).contentWindow.onblur = null;
Alternatively, you may only want to bind to the highest window using window.top.
Right now I have a webpage that renders differently on internet explorer than chrome. I want to load an iframe that holds this webpage. When the webpage is shown within the iframe I want it to render in the way it renders on Internet Explorer. Is there a way to ensure that even users who run this application on chrome/firefox will see the iframe loaded with the internet explorer configuration? I was not sure if the iframe automatically conforms to the browser the webpage is being run on or if there is a way to change the iframe to have it render the way a specific browser would?
No, the page within the iframe will be rendered by whatever browser is rendering the parent page.
Instead, you should focus your efforts on developing a website that operates correctly in all of your target browsers rather than just IE.
There is a vague chance you can do it with CSS but it's highly unlikely. What renders web pages in a certain way is the browser of the user themselves. That's what translates the HTML and that's why your code looks different, because Chrome translates it one way, and Internet Explorer a different way (by the way no one uses IE since XP).
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();
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!
This question already has answers here:
Best Way to View Generated Source of Webpage?
(17 answers)
Closed 9 years ago.
G'day everybody,
As an avid firefox user, I use plugins like stylish and Greasemonkey to modify default styles of pages. However the view->page source option of the browser shows only the page in its original form and not the current form after it is manipulated by a script or a style. Is there any way i can view the source of a page based on what is displayed on the browser and not the original page sent by the server?.
Any suggestions would be much be appreciated.
Thanks.
paul bullard
Use Firebug...
Firebug allows you to inspect the current DOM, CSS and loaded JavaScripts on the fly.
You can also modify anything on the current document and see the results automatically.
Firebug is option for the Mozilla FireFox. There is IE developer tool-bar for IE users.
Almost all browser now a days come with the view source tool or plugin.
Chrome has its debugging tool you can use Firebug for IE, chrome, FIrefox it has provided plugin for all these popular browsers. Please refer its site