0

i have a component which uses iframe. in that i have links to pages. when i click on the link it needs to display the vfpage on the righthand side. but, it is loading the page only once per session or i can say it is reloading the page after some time not like as and when i click on the link. Please help me with this

<apex:component controller="XXX">
    <style type="text/css"> 
        #navigation { font-size:0.85em; width:200px; } 
        #framecontent { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            width: 200px; 
            height: 100%; 
            overflow: hidden; 
            color: white;
        } 
        .innertube{ margin: 15px; }
    </style>
    <apex:outputPanel >
        <div id="framecontent">
            <div class="innertube">
                <div id="navigation">
                    <ul class="top-level">
                        <li><a href='/test/xxx?key=xxxx' target="_parent">Testpage</a></li>
    </apex:outputPanel>
                    </ul>
                </div>
            </div>
        </div>
    </apex:outputPanel>
</apex:component>

Behaviour: The component will shown on the left hand side of the browser and when i click on the link, the respected page will be loaded on the right hand side of the browser. and these are site pages and our site login page is incorporated in another webpage. and pages will be accessible by providing key as an authentication mechanism.

3
  • Are you attempting to cause a hyperlink within the iframe to navigate the parent page to the link's URL rather than navigating within the iframe itself?
    – Mark Pond
    Jan 3 '13 at 17:01
  • Yes, in component i have iframe in which i have links to navigate to different pages. when i click on the link from the component, it is not reloading the page everytime.
    – Haritha
    Jan 3 '13 at 17:15
  • 1
    Can you please edit your question and elaborate on the behavior that you are trying to achieve and the behavior that you are experiencing as well as the HTML markup? There is not enough information here to determine a proper solution.
    – Mark Pond
    Jan 3 '13 at 18:41
1

Revised Answer

While the question still does not provide sufficient context, actual markup nor an iframe I believe what you are attempting is to navigate an iframe from a link which is outside of the frame.

Here is a fully functional demonstration of performing this action, hopefully it gets you started with modifying your own markup to do the same if this is indeed what you're after.

<html>
    <body>
        <div>
            <p>Links</p>
            <a href="http://www.salesforce.com" target="theFrame">Salesforce.com</a><br />
            <a href="http://www.dell.com" target="theFrame">Dell.com</a><br />
            <a href="/apex/YourVFPageName" target="theFrame">Same Domain VF Page</a><br />
        </div>
        <div>
            <p>Frame</p>
            <iframe name="theFrame" src="#" width="800" height="400"></iframe>
        </div>
    </body>
</html>

Original Answer

In the page markup displayed within the iframe you need to target the links to use the parent element. This can be done a few ways:

<base target="_parent" /> will target every link in the page to open in the parent frame.

<a href="#" target="_parent">Link</a> will target just this link to open in the parent frame.

Related SE Question: how to force link from iframe to be opened in the parent window

4
  • This is not working either still loading the same page at the time i click on the link
    – Haritha
    Jan 3 '13 at 18:17
  • Here is my component code
    – Haritha
    Jan 3 '13 at 19:04
  • <apex:component controller="XXX"> <style type="text/css"> #navigation {font-size:0.85em; width:200px;} #framecontent{ position: absolute; top: 0; bottom: 0; left: 0; width: 200px; height: 100%; overflow: hidden; color: white; } .innertube{ margin: 15px; } </style> <apex:outputPanel > <div id="framecontent"> <div class="innertube"> <div id="navigation"> <ul class="top-level"> <li><a href='/test/xxx?key=xxxx' target="_parent">Testpage</a></li> </apex:outputPanel> </ul> </div> </div> </div> </apex:outputPanel> </apex:component>
    – Haritha
    Jan 3 '13 at 19:10
  • Were you able to get this working via these suggestions?
    – Mark Pond
    Jan 8 '13 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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