I am using the YUI3 TabView component in the following format:
var tabview;
YUI().use('tabview', function(Y) {
tabview = new Y.TabView({srcNode:'#demo'});
alert (tabview); //defined
tabview.render();
});
alert (tabview); //undefined
However, when I try to access the variable tabview outside its declaration function, I am getting an exception that the object is undefined. Can you kindly tell me what am I missing out please?
Edit: Also check JavaScript YUI3 using global variables?
Considering javascript's asynchronous nature, tabview is not necessarily rendered before alert() is called on it outside the YUI block. Seeing "undefined" in the alert box in this case means that the variable has been declared but not assigned to any value. If the variable wasn't accessible, alert() would fail due to an uncaught "ReferenceError".
So, in trying to guessing your intention, if you want to examine the tabview object, you might want to use console.log() instead of alert() to see the output in your browsers console, and put it within the YUI block right after render():
var tabview;
YUI().use('tabview', function(Y) {
tabview = new Y.TabView({srcNode:'#demo'});
console.log(tabview); //defined
tabview.render();
console.log(tabview);
});
In order to use tabview outside the YUI block, ensure that it is ready. As a quick example:
Y.on("domready", function() {
console.log(tabview);
}
Related
I've been trying to make custom console commands with JavaScript with no success. There seem to be no sources about my question.
When I say "JavaScript Console Commands" I mean I'd like to make my own commands from the console. For example, if the visitor types "custom.command()" in my website's console area, I want the output to be: console.log("This is my custom command");.
You don't have to do anything special; just create an object at global scope with functions on it, and the user will be able to use it from the devtools console.
For instance (in a script, not a module):
const custom = {
command() {
console.log("This is my custom command.");
},
};
Because that's at global scope, it creates a global, and so it is accessible in the console when your page is open.
(It doesn't have to be an object; you could just create a function at global scope, but your example usage was using an object.)
If you wanted to do this from a module, since the top level of a module isn't global scope, you'd have to do the same kind of thing you have to do to create a global in a function, which is covered by the answers to this question (in your case, it' basically assign to a property on window: window.custom = { /*...*/ };).
Background:
I am running a sandboxed iframe which only has the permission "allow-scripts". In the sandbox a script is loaded with custom js provided by the user. Now i want to manage access to global functions/objects like XMLHttpRequest. Currently i achieve that with the following code:
const CLEARED_WINDOW_SCOPE= {};
const scope = { /* Here goes the globals the script should have access too */};
const propertyNames = Object.getOwnPropertyNames(window);
for(let property of propertyNames){
CLEARED_WINDOW_SCOPE[property] = undefined;
}
with(CLEARED_WINDOW_SCOPE){
with(scope){
(function (window, self, frames, globalThis){
${scriptContent}
}).call(scope, scope, scope, scope, scope);
}
}
The script does the following:
Create object with all window property names set to undefined
Create object with all properties the user should have access too
Wrap the user code with two with statements the first clears all globals the second grands access to the defined ones
Wrap the user code with a function that is called with the scope as this value
So far everything works perfectly as excepted.
Problem:
The main problem that i have right now is that when a user defines a function like that:
function aFunction(){
console.log(this);
}
He gains access to the normal window object because the default this value within a function is the window.
Question:
Is it somehow possible to change the default this value of a function to the this value of the surrounding scope. Since the user creates the script i can't wrap all function calls with aFunction.bind(scope). Or is there any other value to prevent the access to the global window object?
Is it somehow possible to change the default this value of a function to the this value of the surrounding scope.
No, but you can do the next best(?) thing: setting it to undefined. Just force strict mode:
"use strict";
// User's code
(function (){
console.log(this)
})();
Also, I'm not a JavaScript security expert, but JS sandboxing is a really complex topic because of things like prototype pollution.
Edit: As CherryDT noted in the comments, this method is not completely secure. Users can still access the <iframe> window by creating a function with the Function constructor, for example. Also, a reference to the main window can be obtained through the <iframe> window (window.parent).
It's maybe OK to use this solution for user-supplied code (since users can just open the DevTools console and start typing), but make sure the code comes from the user and never from a URL search parameter, for example. If the code is completely distrusted, I would recommend to use a well-known library like Google Caja.
I am trying to implement the following answer from another question:
https://stackoverflow.com/a/26469105/2402594
Basically I need to add an extra check to a jQuery function. The following code is in jQuery library:
But I can't modify the original jQuery, so I am creating a patch in a separate file. What I am doing is overriding the find function and add functionality as follows:
(function() {
var originalFind = jQuery.fn.find;
jQuery.fn.find = function () {
try {
document === document;
}
catch (err) {
document = window.document;
}
return originalFind.apply(this, arguments);
};
})();
The function is overridden correctly, however, when the code calls 'find', my 'try' doesn't throw any exception when it should because the scope is different than the one inside the Sizzle function, so the original issue is still there.
I have also tried duplicating all of the Sizzle code, adding my modification and assigning it to jQuery.fn.find as done above, however the scope issue is still there and some crashes happen.
I need 'document' to be set before it reaches the following check or it crashes due to permission denied:
How could I share the scope so that the try/catch can be done correctly? Is it even possible? Any other ideas?
Thank you
As we all known, JavaScript has function scope: Each function creates a new scope. Scope determines the accessibility (visibility) of these variables. Variables defined inside a function are not accessible (visible) from outside the function.
So, if the document is defined in the JQuery library function, I think you can't access it. You could try to define a global variable to store the document, then, you can access it in the JQuery library function and the override function.
More details about Javascript Scope, check these links: link1 and link2
I have this problem with an onTouchBegin function in which I want to update the position of a sprite on screen. However if I use this line of code inside of the update function is works flawlessly.
this.sprite.x += 5;
Now if I put this line of code inside the onTouchBegin or any onTouch method I receive this error "Uncaught TypeError: Cannot read property 'x' of undefined".
When I debug this inside the chrome console the local variables to the current js file exist and are shown as being instantiated variables with all properties and attributes attached. Then when I click the screen the debugger pauses inside the onTouchBegin function. At this point all the variables seem to be outta scope because they all show up as undefined or NaN or something else.
I cannot figure why this happening if anyone can give me some insight on how to fix this that would be appreciated.
So apparently in the callback function when the callback is returned the event parameter has some attributes attached to it one of the being called getCurrentTarget. This returned the js file that contained all the variables that were properly being used in the update function.
onTouchBegan:function(touch, event)
{
var target = event.getCurrentTarget();
},
My Javascript knowledge is less experienced, so I might use wrong descriptions in the following.
I have an object in a static .js file:
var Info = {
methodA: function() {
// Call methodB.
this.methodB('test');
},
methodB: function(value) {
// Do stuff
}
}
Now, in an .aspx file, I create a function methodC(value) with varying contents (depending on some data), which I want to insert instead of the above definition of methodB(value):
...
var methodC = function(value) {
// Do different stuff
}
...
My idea has so far been to replace methodB with methodC in the following fashion:
...
Info.methodB = methodC;
...
Using IE's buildin developer tool, I get the following error when calling this.methodB('test'); from Info.methodA():
Object doesn’t support this property
or method
Removing the 'this' from this.methodB('test') results in the error:
Object expected
I don't get any errors using FireBug - probably because I use various frameworks, which might catch the error.
How should I do this or should I use a completely different approach?
Regards, Casper
It should work, you are doing it the right way. The problem lays elsewhere.
update:
This should still work as long as you call methodA on an object, eg Info.methodA().
Maybe you are not understanding the error messages ?
"Object doesn’t support this property or method" means that in the expression "this.methodB()", this doesn't have a property named "methodB". So it means that this is not Info when the code of methodA is executed.
"Object expected" means that the variable methodB is unknown in the current execution context. Of course it is, since methodB is never a variable, only a property of Info.
To debug your problem, you need to know what is this when a code is executed, and why it's not what you think it should be. When you call Info.methodA(), this is set to be Info when methodA begins its execution.