I'd like to use the Chrome developer console to look at variables and DOM elements in my app, but the app exists inside an iframe (since it's an OpenSocial app).
So the situation is:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
Is there any way to access things happening in that iframe from the developer console? If I try to do document.getElementById("foo").something, it doesn't work, probably because the iframe is in a different domain.
I can't open the iframe contents in a new tab, because the iframe needs to be able to talk to the containing site as well.
In the Developer Tools in Chrome, there is a bar along the top, called the Execution Context Selector (h/t felipe-sabino), just under the Elements tab, that changes depending on the context of the current tab. When in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the Console will operate. Select your frame in this drop down and you will find yourself in the appropriate frame context. :D
Chrome v59
Chrome v33
Chrome v32 & lower
Currently evaluation in the console is performed in the context of the main frame in the page and it adheres to the same cross-origin policy as the main frame itself. This means that you cannot access elements in the iframe unless the main frame can. You can still set breakpoints in and debug your code using Scripts panel though.
Update: This is no longer true. See Metagrapher's answer.
When the iFrame points to your site like this:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
You can access iFrame DOM through this kind of thing.
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
In my fairly complex scenario the accepted answer for how to do this in Chrome doesn't work for me. You may want to try the Firefox debugger instead (part of the Firefox developer tools), which shows all of the 'Sources', including those that are part of an iFrame
Related
I am trying to develop a firefox extension that adds a panel allowing the user to interact with the DOM of any webpage. I'd like to reuse web components that I've already built. The web components are built using libraries like jquery, angular, d3, and a bunch of others, most of which don't play nice with XUL. To deal with that, I'm including a browser element that contains a web page with my components.
<overlay id="testOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="browser">
<splitter></splitter>
<vbox flex="1">
<browser
src="chrome://testApp/content/index.html"
type="content"
flex="1"/>
</vbox>
</hbox>
</overlay>
This works, and shows my index.html in a panel to the side as expected. However, I cannot figure out how to debug any scripts that are included on the index.html page. The documentation for debugging extensions seems very sparse.
So the question I have is: how can I point the firefox debugger at the browser element in the pane that I've created.
Follow the instructions here for enabling the browser (as opposed to content) debugger: https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger
Once your scripts are loaded in the browser, they should become visible in the debugger's sources pane (but not before that).
If you still can't get that to work, I would love a test case and detailed steps to reproduce, so I could try and diagnose the problem :)
I'm using Firefox to view my applets, but when I make changes it's still the old version that Firefox is displaying. The only way I can change the version Firefox is showing me is by changing the names of the html AND the .class or jar files. Ctrl Shift R isn't working.
<meta http-equiv="Cache-control" content="no-cache" /> in the <head> tag should cause Firefox (or any browser for that matter) to not cache anything at all on that particular page.
Test applets in the appletviewer whenever possible. It does not cache classes.
For deployment, deploy them via JNLP whenever possible (user has Next Generation JRE) for more reliable class update.
Try linking it with myapplet.class?somerandomstring. Then the Browser thinks "maybe its generated dynamically, so i need to reload it". At least with images it works very well.
Ctrl+Shift+Del and then select cache checkbox with the interval you want to clear from the top of the window. Then click OK button.
I am writing a Firefox extension which creates a Java applet in the page.
function addApplet(aDocument,url,classfile,archive) {
if (navigator.javaEnabled()) {
var anApplet,body;
body = aDocument.getElementsByTagName('body')[0];
anApplet = aDocument.createElement('applet');
anApplet.setAttribute('CODEBASE',url);
anApplet.setAttribute('code',classfile);
anApplet.setAttribute('archive',archive);
anApplet.setAttribute('name',"Applet");
anApplet.setAttribute('width',"0");
anApplet.setAttribute('height',"0");
body.appendChild(anApplet);
}
}
The JAR file loaded from the applet is 500KB in size. I noticed that sometimes the extension causes Firefox's vertical scrollbar to freeze and the hot-keys to stop working. The scroll-bar and hot-keys work fine if I prevent the extension to append the applet to the page.
Another weird behavior is -- on the frozen page if I click inside any text/search box or even address bar the scroller and the hotkeys begin to work again. The same thing happens if I switch tabs or minimize the browser window.
I am using Firefox 3.6.12 on WindowsXP.
Please help me if you have an idea regarding this or if I should provide more information.
(Hey guys this problem is still not solved....please help me out with this......)
Thanks
See if something similar happens if you load the applet from an html page that includes the tag and its children as static content, rather than content added to the DOM.
I imagine it's a problem of Firefox and java, not your code.
Applets can be tricky. I would suggest creating a page of pure HTML that works, first.
As far as suggestions for change go, 1st thing to change is the width/height of the applet. An applet with 0 size can cause all sorts of problems. Instead, give it a WxH of 20 (then later hide it using CSS).
Ok this has worked:
Solution:
This behavior is the default since JDK 1.3. However you might need to prevent the applet from getting focus on startup, for example, if your applet is invisible and does not require focus at all. In this case, you can set to false the special parameter initial_focus in the HTML tag, as follows:
<applet code="MyApplet" width=50 height=50>
*<param name=initial_focus value="false">*</applet>
Cheers,
Currently I'm trying to include Dojo from either one of these two CDN (Content Delivery Network) sources:
1) o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js
2) ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js
It seems like some times during the day, Firefox 3.5 refuses to load the dojo library.
I see errors in Firebug console like "dojo is not defined" when I do a "dojo.require" statement. Also from Firebug and go to the "Net" tab, and see no history of any attempt to load from the above dojo libs.
Yet, I can open the same page in IE7 and it works. I have flushed cache in FireFox, and killed and re-opened it (but I was using the restore previous pages option).
One time today, when I switched from AOL 1.3.2 to 1.1 it worked once, then never has worked again.
Thanks,
Neal
Sounds like timing issues. Are you sure you do CDN right? The trick is you cannot use what's defined in files you dojo.require()d right away — they are going to be loaded asynchronously.
The basic structure of the CDN-based application is like this:
<script src="to/dojo/cdn"></script>
<script>
dojo.require("dojo.this");
dojo.require("dojo.that");
// more dojo.require()
// you cannot use dojo.this and dojo.that here
dojo.addOnLoad(function(){
// this is crucial: do everything in dojo.addOnLoad();
// now use dojo.this and dojo.that
dojo.this(dojo.that);
});
</script>
In order to troubleshoot you can do one thing: write a minimal web page, which loads Dojo using your favorite CDN and does nothing. Open it up in Firefox, open Firebug and enter some simple Dojo calls manually to see if it works for you. If it doesn't, switch to the Net tab and see what calls were made, when, and how they ended.
I've created a couple of Office plugins. The plugin shows a set of html files installed on the clients computer. The plugin uses a COM-accessible assembly which shows a WinForm with a WebBrowser on it. The plugin makes the WebBrowser navigate to a file on the clients computer. The assembly is also used in other programs to show the same information.
When showing the local html files using a 'normal' browser (e.g. double clicking a file in Windows Explorer) the browser popup a security warning about running active content. This is because we have some javascript in it. This warning is supressed by setting the 'Allow active content to run in files on My Computer' in the Internet Explorer settings. This solves the issue using a 'normal' browser.
Funny enough the 'active content' warning is not shown when getting the same file using a Word/Excel/PowerPoint plugin. It calls the same assembly, using the same WinForm and using the same content. Despite the setting 'Allow active content to run from My Computer' being false, the content is shown without a warning and the javascript is executed.
Now, the problem and the real question is that Outlook does the reverse. No matter what I use for 'Allow active content to run from My Computer' the browser warning about the active content in the html file is shown. When I confirm the message and allow the scripts to continue, the javascript runs fine. So, even when I set the 'Allow active content to run from My Computer' to true, the warning is given.
I've gone through all (sort of) relevant settings in Outlook, but nothing helps.
I assume that Outlook is using some kind of private context for a webbrowser (probably because it is using a webbrowser object internally).
The real question is: how can I make the Outlook plugin respect the IE settings?
(I understand this is a long story and maybe not clear enough. Please let me know if I have to elaborate more).
I couldn't get rid of the security warning without lowering the security setting. And that is not an option: we are talking about a project that will be installed on millions of computers.
I decided to go another route. Let's see if we can make the browser trust the html pages. So, what to do to get rid of the 'Active content' warning.
First I investigated what exactly triggers the warning. That was easy: any tag in your html file will do. And I need script, so removing that isn't an option. But, when hosted from a website, the scripts run fine and don't suffer from a warning. So, I investigated if it is possible to run my files in the Internet-context.
I found out there is a way, at least for IE (which in my case is sufficient). If you save a webpage as a complete HTML file from IE, the browser adds a comment to the html to signal its origin. Something like: . If you later open that stored html file, the file is shown in the Internet context.
So, I tried adding to the html file. And, voila, the file is opened in the Internet context. The security warning about active content is gone and the scripts are executed fine.
But, that raised another problem. We have a couple of window.open statements in the scripts and using that causes he cross domain browsing problems that in recent IE versions are blocked. Even if you use a relative path in the window.open call, if fails and you end up with a blank window.
In our case, we can (probably) decide to get rid of the window.open calls. But, if a reader ever finds a solution for using window.open in this scenario, I would be very happy if you let me know.
So, for now: case closed...
Internet explorer use Mark of web in such cases
<!-- saved from url=(0014)about:internet -->
<!doctype html>
<!-- saved from url=(0023)http://www.contoso.com/ -->
<html>
<head>
<title>A Mark of the Web Example.</title>
</head>
<body>
<p>Hello, World</p>
</body>
</html>
More info from here
https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx