Is it possible to restrict the scope of a javascript function?

Question

Suppose I have a variables in the global scope.

Suppose I wish to define a function which I can guarantee will not have access to this variable, is there a

Answer 1

I verified @josh3736's answer but he didn't leave an example

Here's one to verify it works

parent.html

parent

child.html

child

When run it prints

-calling from child-
parent foo: abc = parent
-calling from parent-
child foo: abc = child

Both child and parent have a variable abc and a function foo. When the child calls into the parent's foo that function in the parent sees the parent's global variables and when the parent calls the child's foo that function sees the child's global variables.

This also works for eval.

parent.html

parent

child.html

child

When run it prints

-call from parent-
from fn: child

showing that it saw the child's abc variable not the parent's

note: if you create iframes programmatically they seem to have to be added to the DOM or else they won't load. So for example

function loadIFrame(src) {
  return new Promise((resolve) => {
    const iframe = document.createElement('iframe');
    iframe.addEventListener('load', resolve);
    iframe.src = src;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);  // iframes don't load if not in the document?!?! 
  });
}

Of course in the child above we saw that the child can reach into the parent so this code is NOT SANDBOXED. You'd probably have to add some stuff to hide the various ways to access the parent if you want make sure the child can't get back but at least as a start you can apparently use this technique to give code a different global scope.

Also note that of course the iframes must be in the same domain as the parent.