A web-browser window contains the window object. This object contains many properties. Many of those properties are objects. Some are constructors (XMLHttpRequest, Worker, File, ...), some are regular objects (document, location, navigator, history, screen, ...), some are non-constructor functions (a.k.a. methods) (alert, setTimeout, ...). Then there are properties that just contain primitive values (innerHeight, innerWidth, name, status, closed, ...).
This is a huge collection of properties. Studying all of them is hard enough, but it becomes even more brutal when we consider that each browser has its own set of those properties.
Here are the window properties references for Firefox and IE:
Firefox: https://developer.mozilla.org/en/Gecko_DOM_Reference
IE: http://msdn.microsoft.com/en-us/library/ms533054(v=VS.85).aspx
(btw, don't get confused by the name "Gecko DOM Reference" - it is a complete browser objects reference and the DOM (the document object) is just a part of it)
I don't even know where the references for Webkit browsers or the Opera browser are...
I noticed that there is a "Comparison of layout engines" series on Wikipedia which covers HTML, CSS, the DOM, and others. But it lacks an article about browser objects (window object properies). I mean, how could a web-developer know which property is cross-browser? Does he have to test for each one of them?
I really would like to have a web-site that tracks (maintains) a cross-browser reference of window properties. Is there such a service?
Maybe quirksmode?
Concerning the window object in particular check:
the MDC and this.
Related
I recently encountered this on one of my project and I don't think I have the full understanding of this thing at all. The only thing I know are the following:
-That DOM prevents scripts that are loaded on blocking the rest of the page.
-Html files and other page source codes are parsed and turned into DOM, with which, when you inspect it or go to view page source, the DOM format of the code is what it will throw you.
-I was also able to implement DOM on our project through the help of a tutorial.
Now, my questions are:
-Is the code in the devtools the DOM?
-Does DOM adds security features on a system?
-Since DOM was widely implemented in the layout engines of the web browser, is there any other advantages of using DOM aside from it prevents possible blocking of the rest of the codes of the page?
Thanks guys.
The DOM (Document Object Model) is all about the code/object hierarchy within a given system/node. It is symbolic of the branches of an upside-down tree. It forces the different layers of code to always have a parent-child-sibling relationship.Any code inside another block of code is a child of the larger block. For html, the html tag is the parent of all other tags, followed by the head, then body tag. Most all displayed content is in the body section, with one division creating the main page you see. After the division tag you have the ul / li / p / a tags. Sometime the span tag is used as a wrapper for the 'a' or 'p' tags. The 'ul' tag is a child of the div tag it is in, and the 'li' and/or 'p' tag is a child of the 'ul' tag. Only the span tag varies in location when used, depending on its need to keep objects and/or text inline. The lowest possible child (or leaf in a node tree) is either a 'p' tag or an 'a' tag. No other tag can be used inside the 'a' tag. A sibling is referred as a tag or node of the same level in the tree, but in an adjacent div or ul or li tag. Their relationship is not defined normally, unless there is a need to do so. In summary, the DOM is used to insure order and readability in html / XML /SQL and other software systems. It does NOT guarantee good working code by itself, but it sure helps create efficient working code early in the design stage.Also, new coding functions are being employed that can bypass or modify the way the DOM behaves. Angularjs and MEAN, which includes a micro-server and node.js, are trying to turn a clients web page into a de-facto desktop application, such that the request to the server become as minimal as possible. These new functions do not contradict the DOM model, but act as a wrapper so action/editing/motion on a webpage appears instantly without having to contact the main server. During periods of no user action an update is sent to the main server, so the website and the PC stay in sync in terms of changes that are at least semi-permanent.Please read as much as you can about these topics, because every year something new is added.
When using chrome developer tools, it appears that each app window (and the background 'page') has its own javascript context (space of objects, thread of execution), and yet the createdWindow callback of chrome.app.window.create apparently provides direct access to the objects of the 'other' window that was just created.
Given that, I'm unclear on the best way to communicate between windows; e.g. if I open a second window to act as a dialog box, when the user clicks OK to save changes, should I be using postMessage, sendMessage, or just call a function on an object in the main window. I've looked at the messaging samples, and they seem focused on communication between two different apps, or between an app and an extension.
So, I'm seeking a clear description of the memory and execution model within one app. Are there really separate contexts, or is it just one space of objects, with one thread of execution? What is the best way to communicate between windows of the same chrome app?
That is a great question James!
Multiple chrome windows are not completely separate. They share a single thread and object space, however the window object is different for each. In javascript unscoped references to things are looked up on the current window, so this makes the windows appear to be different object spaces - but they are not really.
So, you can reach into another window and execute a function there, or manipulate state in other ways (e.g. set a variable on another window to a function from the current window) and it is acceptable and supported.
You might find the chrome.app.window.getAll() and chrome.app.window.get() methods useful. They are however new to Chrome 33 which is not yet in the stable channel.
As an alternative you could hold an array of opened AppWindow objects in the background page context.
You can then get a reference to the background page context from any window using the chrome.runtime.getBackgroundPage() method
We are develpoing a web-based automation solution for a web application that is built using ExtJs.
Currently i am testing various different object identification techniques that identify web elements in the best way.
We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).
Is this possible to do through code or through some other technique?
I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.
You can target Ext components via several ways:
Ext.ComponentQuery.query(CQselector) method (see docs for examples)
Ext.getCmp(componentID) if you know component ID
up() and down() methods from any container/component. these also take CQselector expressions
Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.
Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.
I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!
Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.
You could then use
comp.itemId
To retrieve the itemId
You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.
You can also use the Sencha Page Analyzer to see the entire component tree
It has been a while since I've touched GWT, but I was recently looking at GWT applications to see how they accomplished certain tasks. I noticed that if you go into AdWords (a GWT application), you can manipulate table information in-line. For example, if I go into my campaign and click the pencil icon next to the ad group, a little popup will appear allowing me to change the ad group's name ... except there's no identifying information anywhere in the DOM structure. No hidden fields, no id's snuck into the div elements.
What's going on here? I've been working with interactive tables, but I've always established a click handler on a class and stuck an ID in there so I can tell what I'm editing. I've always found this as unsatisfactory. Any ideas?
It uses a JavaScript variable to get a hold on the element directly when it's created. That variable can then be stored somewhere - as long as it's accessible directly or indirectly from the the global object (document), it can be retrieved later from there.
A simple pure JavaScript example would be:
document.myParagraph = document.createElement('p');
document.body.appendChild(myParagraph);
document.mySpan = document.createElement('span');
document.myParagraph.appendChild(mySpan);
...
document.mySpan.onclick = ...
I'm building a Zend-based Web app that will permit third-party extensions.
Essentially, this application's database will have a generic "content store." Extensions are added to render different pieces of content in different ways.
Think of a rich mail store: When the user asks for a "Calendar" item, I instantiate a Calendar class (or something) and ask it to render the item's content. The same database might contain "Mail" items, which are rendered by a different class (or whatever). So I'm basically defining a base class with the needed methods to handle content items, and then add-ins are written which inherit from that to deal with specific item types.
Each of these add-ins may need to access its own View files, since each of them will obviously have a different visual layout.
I can't foresee all the content renderers that might be used; new ones will be "installed" (in some fashion) so that my application knows "when I see content with a database type column of XYZ, I'll call the XYZ thing to render that."
Likely, what will happen is this: User will visit a URL for the application, thus triggering an action within a Controller. That Controller will use a Model method, telling it which specific content item was requested.
From there, either the Model or the Controller (which?) needs to call something (what?) that gets the item from the database (okay, the Model clearly does that) and renders it using some predetermined View. This would be PART of a larger page that might well include several rendered items (as in, a list of content items).
So two questions:
What's the best way to architect this in Zend Framework? I do want these add-ins to inherit from a base renderer class that I provide, because very simple renderers may simply need to call functionality from that base class, rather than having any of their own code (e.g., a "Note" and a "Memo" might well use the simplified rendering functionality from the base renderer class).
What's the best way to "register" these add-ins with my application? An .ini file, perhaps a database table? The goal is simplified installation steps for whoever is operating the application - e.g., editing an .ini file is often easier than manually querying a database, although I could also provide an admin back-end UI for new content renderers to be registered in.
I'd implement the Visitor Pattern for this.
Each third-party extension should implement an interface that you define, so that you know you can call a specific method, say render() on any object that is an instanceof that interface.
Each extension then implements its own rendering. Perhaps it utilizes a View partial in the Zend Framework architecture. Or else perhaps it uses some totally different code to render itself as a PDF or something (maybe each extension needs to be able to override content-type headers?).
As for how to register it, check out the Zend_Application framework for defining resource plugins.