How to Read a Title in iFrame

As your Internet application runs, it may use iFrames to display views of other websites located on your Web server. IFrames, also known as inline frames, function as miniature browsers that can be placed anywhere on a website. Every page on the Internet has a title property, even if that property is blank. IFrames have titles as well. Read the current title of any IFrame by adding a quick JavaScript function to your HTML code.

Instructions

1. Launch any text editor or HTML editor and open one of your HTML documents. Add the following HTML code to your document's body section:

   <iframe id="iframe1" src="Another_Web_Page.html" width="500" height="600">
   </iframe>
   <input id="Button1" type="button" value="button" onclick="return getTitle('iframe1')" />

   This tag creates an iFrame and a button. Replace "Another_Web_Page.html" with the URL of another HTML document on your Web server. The button tag creates a button that calls the JavaScript function which reads the iFrame's title. The onclick event passes the iframe's ID value to that function.

2. Add the JavaScript function shown below to your document's script section:

   function getTitle(iframeID) {
   var iframe = document.getElementById(iframeID);
   var title = iframe.contentDocument.title;
   alert(title);
   }

   This function retrieves a reference to the iFrame; the alert statement displays that title.

3. Save your HTML document and view it in a browser. The iFrame appears on the Web page and displays the website you set in the HTML code. Click the button to read that page's title.

Tips & Warnings

• If your Web page has multilple iFrames, give each one a unique ID value and pass each iFrame’s ID value to the "getTitle" function as described in these steps.

References

• W3Schools.com: HTML Iframe Tag

Resources

• HTML Dog: HTML Intermediate Tutorial