How to fix Window.getComputedStyle is not an object error - javascript

I am trying to use draggabilly available at
https://github.com/desandro/draggabilly
it works fine in html. Now when i have tried to add it in wordpress. I am getting following error in firebug console.
TypeError: Argument 1 of Window.getComputedStyle is not an object.
return s.getComputedStyle(t, null)
here is a link for js file
http://draggabilly.desandro.com/draggabilly.pkgd.min.js

You are calling init twice. Go through your code and remove one instance.

I received this error testing my project with IE8: finally it was so obvious, this method doen't work with IE 8!
Error: Object doesn't support this property or method at: http://...
I received this error with FF that does support this method but I forgot to change window to my frame window object!
console.log(getComputedStyle(window.document.querySelector('.tip > .tip.top'), ':after').getPropertyValue('left'));
TypeError: Argument 1 of Window.getComputedStyle is not an object.
at: http://...
Note that the above error pops up even if your window object is ok but the querySelector returns nothing! (I suspect it's your case).

Related

how to find which script in a webpage actually overwrite the window.open() to window.open = true

I have a javascript function which actually use the window.open() method to load a page in an Iframe. But I'm sure that by some another script the window.open is overwrited. Thats why I'm getting an error that
Uncaught TypeError: window.open is not a function
Is there any way to find out that which script actually doing this without finding in all script. Because the page have many scripts.
You can set window.open to be non-configurable and non-writeable by executing
Object.defineProperty( window, "open",
{ writable: false,
configurable: false
}
);
before loading or executing other scripts.
Chrome then reports an attempt to set window.open to true as
Uncaught TypeError: Cannot assign to read only property 'open' of object '#<Window>'
along with details of where the attempt was made. Firefox behaves similarly with an error message of
TypeError: "open" is read-only
Note that MDN description of modifying existing properties, at June 1 2018 states that attempting to write to a non-writeable property "doesn't throw an error either". This appears to be incorrect and does not match the code example comment.

jquery finding one object and not another next to it (works in Edge but not chrome)

This is probably the weirdest thing I have witnessed.
I have the following code at global scope:
var status = $('#monkeyballs');
console.log(status);
var clock = $('#event-count-down');
console.log(clock);
<div id="monkeyballs"></div>
<div id="event-count-down"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In Edge both of the console.logs log an actual jQuery object, while in Chrome for the "monkeyballs" div it prints out [object Object] and prints out the actual jQuery object for the second like it should. So the issue is not with jquery itself not working but specifically that element.
I have even tried $(document.getElementById('monkeyballs')) again it works in Edge and not chrome.
I have cleared my history and cache.
When I try to access any of the jQuery properties/methods I get the '' is not a function such as Uncaught TypeError: status.removeClass is not a function
at (index):644
Anyone ever witness anything like this and am I missing something trivial?
Found my problem, it was because my variable name was status and Chrome seems to choke on that and after looking it up, it seems its a predefined global.

offset() from jQuery crashes on "elem.getClientRects is not a function"

const targetPos = target.offset();
I am getting this error:
Uncaught TypeError: elem.getClientRects is not a function
The target is not a window. jQuery version is 3.2.1 and I am not using jQuery UI.
Any ideas why is it crashing and how to fix it?
Oh, it turns out target was a wrong object (#adeneo was probably suspecting this).
When passing it to a function which expects the target I forgot that ElementRef (element field) is not actually the DOM element I wanted, it's just a wrapper.
I changed
jQuery(angularComponent.element)
to
jQuery(angularComponent.element.nativeElement)
and now it works :).

(IE9)Unable to get property 'dispatchEvent' of undefined or null reference

My code is:
var internal= $("span[title='expand']")[0];
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click",true,true);
internal.dispatchEvent(clickEvent);
and IE9 throws runtime error
Unable to get property 'dispatchEvent' of undefined or null reference
I am confused because IE9 starts supporting dispatchEvent. But IE10 AND IE11 works fine with the same code.
How can I solve it? Thanks!
Are you sure the local variable 'internal' is not undefined at the moment dispatchEvent is called?
Did the call to jQuery to fetch the span return a valid DOM Node?

Break when new variable is defined/created in browser

Is it possible to get chrome dev tool or firebug to break when a new variable is defined in an object? The object that I am interested is specifically the "window" object.
I get
Uncaught ReferenceError: remoteUser is not defined
for "if(remoteUser)" in Chrome Developer Tools. The error doesn't occur everytime the page is visited, so I want to findout the line where the variable does get defined and get set to a value.
I could search the javascript files for that variable, but that route is very tedious.
You could change it to a property and invoke debugger; in Chrome:
Object.defineProperty(window, 'remoteUser', {
set: function() {
debugger;
}
});
Then just step up the call stack.
There's a built-in thing in Firefox: watch
One can watch even not-yet defined variable.
Usage: window.watch("remoteUser", callback)

Categories