2

I have a simple Salesforce.com Home Page component that has an iFrame to display my custom visual force page that has only one button on it. I am trying to find out how to display Parent Window (the main SFDC window) page title using javascript on a Button Click event.

alert (Document.referrer) gives me the url for the page. However, I am struggling to get the page title that is displayed in the browser window as well.

The screen show of what I am trying to achieve is as follows:

enter image description here

Here is the sample code for Home Page Component

<iframe src="/apex/Parent_Title" style="min-height:320px;max-height:400px;"  id="myFrame"  ="" frameborder="0" scrolling="no" width="200px"></iframe>

The custom VF Sample Code is as follow:

 <apex:page showHeader="false" sidebar="false">
   <script type="text/javascript">
   function Show(){

     var winTitle;
    // winTitle = <need to get parent window title here> ;

     alert('parent Window Title ='+ winTitle);

     }
   </script>
  <h1>My Test Page</h1>
  <br />
  <input type="button" name="btn" onclick="Show()" value="Click Me" />
  <!-- End Default Content REMOVE THIS -->
</apex:page>

any javascript gurus in Salesforce world to help out here?

  • Kashi
1
  • Because the iframe (as your screen shot shows) is served from a different domain than the containing page it will not be able to access the containing page (because of en.wikipedia.org/wiki/Same-origin_policy). So see Daniel Ballinger's alternative approach. – Keith C Apr 8 '14 at 21:47
2

You could turn the problem around and pass the required information into the iFrame via the src queryString.

E.g. My Javascript is a bit rough below and would probably be easier with some jQuery. Hopefully you get the idea.

<iframe style="min-height:320px;max-height:400px;"  id="myFrame" frameborder="0" scrolling="no" width="200px"></iframe>
<script type="text/javascript">
    document.getElementById('myFrame').src = '/apex/Parent_Title?Title=' + document.Title;
</script>

Then in Parent_Title (method from How can I get query string values in JavaScript?):

<script type="text/javascript">
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var winTitle = getParameterByName('Title');
</script>

It might be nicer to use Visualforce to inject the query string value into the Javascript.

Of course, there is a BIG downside to this approach. It will open you up to JavaScript injection via the iframe query string parameter. At the very minimum you will need to sanitise the value coming off the query string. See Cross-Site Scripting (XSS) for a descirption of the issue.

2
  • Thanks for the answer @Daniel Ballinger - I don't know whey I didn't think of passing the info via iframe. Will sure give it a try. – Kashi A. Apr 8 '14 at 22:21
  • No problem. Just be really careful to protect yourself against XSS issues when putting data from the query string into Javascript. – Daniel Ballinger Apr 8 '14 at 22:27

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.