It's my understanding that LockerService will prevent other components or namespaces from accessing the DOM elements of other components, but how am I supposed to access them from within the component itself?

If this is what's in my .cmp:

<div aura:id="frameContainer"  id="frameContainer" class="full-size">
    <aura:if isTrue="{!v.baseFormAssemblyURL != null}">
        <iframe aura:id="formassemblyIframe" id="formassemblyIframe" onload="{!c.frameLoad}"
        class="full-size" src="{!'//' + v.baseFormAssemblyURL + '/' + v.formId + '?' + v.formAssemblyParameterString}"  width="100%"
                frameborder="0" 
                >
        </iframe>

    </aura:if>
</div>

and the handler for frameLoad is

frameLoad : function(cmp,event,helper) {
    console.log(document.getElementById('frameContainer'));
    console.log(cmp.find('frameContainer').getElement());
}

I end up getting Proxy objects out each time.

Is there something i'm missing here, cause i need to get access to the the href of the iframe to detect if it changes.

You are correct, Locker wraps native DOMElements in a proxy. Ignore the shape of the object returned and evaluate the attributes you are interested in. It should work fine.

frameLoad : function(cmp,event,helper) {
    console.log(document.getElementById('frameContainer').classname); // full-size

    document.getElementById("formassemblyIframe").src; // Works
    cmp.find('formassemblyIframe').getElement().src; // Works
    document.getElementById("formassemblyIframe").href; // Works and returns undefined in your case
    cmp.find('formassemblyIframe').getElement().href; // Works and returns undefined in your case
}

Why is the DOMElement wrapped in a Proxy?

Locker uses proxy to prevent access to the DOM element's prototype. Allowing access to the prototype will open it up to security attacks. Rouge components can do that by walking up the prototype chain and mutating the HTMLElement, EventTarget and such native classes. Once the native implementation is mutated, every other DOMElement will consume the mutated implementation because they share the prototypes.

  • Cool so there's no way to stop that, but it says here developer.salesforce.com/docs/atlas.en-us.lightning.meta/… that "You can interact with a Proxy object in the same way as you interact with the raw JavaScript object" but i can't ask .contentWindow.location which i could of a normal iframe element. What i'm trying to do is work out when the iframe page has changed location. – Chris Abraham Jan 3 at 19:54
  • Locker exposes only a limited set of properties on contentWindow. But we do have a work item to expose more properties, starting with contentWindow.document. When we have that working, you can access the location object by calling contentWindow.document.location. W-3948012 is the work item for supporting contentWindow.document. If you create a case with salesforce, please reference that bug number. – Ravi Jayaramappa Jan 3 at 23:58

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.