Iframe Id Source

Question

I want to reset the source to an IFrame name pricingrequest in a component name ShowDataComponent I am using the following on a button:

 <iframe id="pricingrequest" width="500" height="600" src=>

<button class="slds-button slds-button_icon slds-float_none slds-button_icon slds-button_icon-small" title="Edit this Field" onclick="document.getElementById('pricingrequest').src='https://te--LightExp.cs54.my.salesforce.com/apex/TestPage2'; return false"> 

This is returning a null id therefore not resetting the src. how can i fix this?

Edit: The component has an iframe which opens the VF page, the VF page has the button to reload the iframe. Could this be the issue? Is this possible to do another way?

Answer 1

With a standard HTML <iframe> tag, just use the literal id:

document.getElementById("pricingrequest");

One common approach is to use an "ends with" selector ($=) instead. For example, if you have <apex:iframe id="pricingrequest" ... />, you would use:

document.querySelector("[id$='pricingrequest']")

Answer 2

To get his to work I treated the iframe as if it were the entire window for the visualforce page I embedded within the iframe. So on the visualforce page instead of resetting the .src of the iframe I just used:

<button class="slds-button slds-button_icon slds-float_none slds-button_icon slds-button_icon-small" title="Edit this Field" onclick="redirect()">

    <script>
        function redirect(){
            window.location.href='/apex/TestPage2?oppid={!oppid}';

        }</script>

This appears to work... still not certain it is the best way but it gets the result I needed.