Javascript - meaning of "parent.parent.someFunction();" - javascript

In a webapplication I came across, there is a javascript line in logout.jsp as:
parent.parent.renderProcessingTextOff();
On debugging the page with IE script debugger, it is breaking on above line with error as:
Object doesn't support this property or method
What is the meaning of this error?
How to solve it?
I am new to javascript, so please explain in simple terms.
Flow of logout is:
on click of logout button, a command is passed and intercepted in interceptor, which directs it to appropriate processor, which forwards the request to logout.jsp.
Its a spring application, if that information is of any help.
Thanks for reading!!

Are there frames or iframes on your page? Or object elements?
parent is a property of the window object (and the window. part of window.parent is assumed if you leave it out).
From MDN:
When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.
So if from an iframe that is at least two levels down, the line parent.parent.renderProcessingTextOff(); says to call the renderProcessingTextOff() function defined by its grandparent.
Obviously if that line of code appeared where there wasn't a grandparent with that function defined then you'll get the error you quoted.

In this case, it looks like the first word, parent is an object instance. That object has a property called parent, and to access it you use the syntax parent.parent. The property is in turn another object, which is supposed to have a property called renderProcessingTextOff which is called as a function.
If I would venture to guess about your problem, it seems that parent.parent is of the top level Object class, and Object does not have that method.
If you already is using the IE script debugger, put a breakpoint at that line and examine the parent and parent.parent objects.

Related

How to pass values from HTML webresource to javascript on window close MSCRM

I am opening HTML webresource using Xrm.Navigation.openWebResource but on closing of HTML window I want to pass values from HTML to javascript file from where it is opened. Is there call back function can be implemented?
If I open HTML window using window.open I can call parent javascript function using window.opener.functionname on close but click but I want to know how I can pass values to parent javascript file on close button click of HTML window.
I tried with window.parent.opener.Functionname() but it is not working - getting functionname is undefined but it is defined in parent javascript. Pls suggest.
If you're using the 'old' (as it not the unified interface) user interface with turboforms enabled then the parents javascript is actually in a extra iframe called customScriptFrame, and not on the parent itself.
To call something on the parent you can use
parent.customScriptsFrame.functionname() for IE
and
parent.customScriptsFrame.contentWindow.functionname() on chrome.
On the unified interface its much the same, but far more troublesome.
Now the scripts are in a iframe called ClientApiFrame_[n] where [n] is some random number. And i haven't found a good way to determin that number ahead of time from a webresource.
You could go over all frames of the parent in javascript (parent.frames) to find one that has a id that starts with ClientApiFrame_ but that will throw errors trying to read frames with sources set to external domains, and i dont think is very good practice.
Another possibility is registering the function you want to call with the parent ahead of time. so in the main javascript use this.
parent.functionname = functionname
And then from the webResource you can use the normal
parent.functionname
If the webresource is embedded in the form, then use window.parent
If you Xrm.Navigation.openWebResource to open it, then use window.opener

How did I lose JavaScript built-in objects and all global variables?

I'm working on an Umbraco site that needs to work in the big browsers, including IE 11, and I've run into a weird issue that I can only replicate on IE 11.
At some point, the script for a TinyMCE plug-in tries to execute this code (about four calls deep) in response to a blur event:
function classTest(cls) { return new RegExp("(^|\\s)" + cls + "(?:$|\\s)\\s*"); }
and it throws a "Object doesn't support this action" exception when trying to create the RegExp object. cls is defined and has the value I expect.
While paused (using Visual Studio debugger) on the unhandled exception, I did a little checking.
It turns out that RegExp was undefined. I found this extremely weird.
A little more investigation revealed that ALL the built-in objects were undefined. Number, Array, Object, Math... all of them. Also, while I could enumerate the global keys, all the values were also undefined.
Weirder, I could use the console or immediate-execution windows, within the problematic scope, to create regular expression objects by using the /pattern/ syntax.
But this condition is true only in the scope of the event handler. As soon as the event handler exits, all the built-in objects and global variable values were restored.
How is it even possible to lose access to the built-in JavaScript objects, without losing access to the basic JavaScript parser and engine?
And, once lost, is it possible to restore them?
I experienced this problem as well, and assuming you're also having trouble with the TinyMCE CodeMirror plugin, the problem is triggered by this line in codemirror.js:
on(window, "blur", function () { return forEachCodeMirror(onBlur); })
where window refers to the iframe containing the CodeMirror editor.
This iframe is inside of a TinyMCE dialog. I've discovered the error only occurs when the iframe (or an element inside it) loses focus at the same time that the dialog is closed, removing the iframe from the DOM. You can test this by first clicking outside the iframe (on the page overlay, for example) before closing the dialog.
IE11 seems to be calling the blur event after it has started destructing the iframe's window object. I would classify this as a bug in IE11, which will never get fixed. Since we probably don't care about the blur event in an iframe that's being removed from the DOM, we can work around the problem by modifying the problem line to skip it in that case:
on(window, "blur", function () { if (window.RegExp) return forEachCodeMirror(onBlur); })

Profiling: how to find out which object a method is attached to?

I have inherited a JavaScript application and I am trying to understand how it works using profiling in Chrome.
Chrome gives me the sequence of methods that are executed, but I only see the method name. How can I find out which object a given method is attached to?
If you want to see the call stack in Chrome dev tools for a specific method, you need to set a break point in the "Sources" panel.
Here's the entire process:
Run "Collect JavaScript CPU" Report
In the functions column, click the right-hand link (of the function in question) to jump to the appropriate source code line
Set a break point on that line
Re-run the script (usually via page refresh)
If break point is hit, call stack will be presented on the right-side column of the "Sources" panel

Add method to javascript's Window object before the page starts loading

Is it possible to add a method to a dynamically created iframe's Window object before the requested page starts loading? I would expect to do this though iframe.contentWindow.myMethod = function() { }, however iframe.contentWindow is NULL before the page loads.
I can add the method when the onload event fires, however some pages make an inline call to the method I'm adding. As the browser executes code when received 'method doesn't exist' errors are being raised.
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I very much doubt there is. Perhaps you could modify the pages being loaded so that they call the method in the parent window instead, where you know you'll already have the method defined. E.g., instead of them doing:
someMethod("some arg");
they'd do
parent.someMethod("some arg");
...where someMethod is a global function within the opening window.
Live Example | Source | Source of iframe
You can't modify a page before it starts loading - there's nothing there to modify. You can modify it while it's loading - using a <script> tag at the top of <head> that executes directly, rather than waiting until onload. That's about the soonest you can do it, though.

how to check what JavaScript functions have been called in firebug

I am editing a complex website.
Some jQuery functions are called in response to clicking on different elements (links, div, anchor, etc.).
How can I see what JavaScript function is called when I press on an element?
In each of the functions, add a console.log(functionname). so whenever the function is called, you will see a line in console telling you the function's name.
I believe you can do this with the Profile button although I haven't used this myself yet.
you can place a breakpoint on some inside function and see if the program hits it (in firebug you can use script tab for placing breakpoint)
In chrome/safari you can inspect the call stack on any breakpoint. I'm positive that firebug will let you do the same thing.
So set a breakpoint at the place where you wan to see what's calling it and then inspect the call stack to see what chain of calls led you to that point.
Warning: jQuery does a lot of anonymous functions so it can be a little tricky to trace back.

Categories