3 Replies - 1888 Views - Last Post: 26 December 2013 - 05:03 PM

#1 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 70
  • Joined: 18-August 13

How do I replace a page's title with an iframe's page's ti

Posted 26 December 2013 - 02:45 PM

Hello all, seasons greets. Hope you all are well. :)/>

I am working on a site where most of the pages are more or less the same except one section. So, I decided to make that section an iframe and load the other pages into it. I've accomplished this with java script, however, the title that is seen in the browsers tab is of the frame page(parrent) and not the "individual" page that is loaded into the iframe. How do I change this? BTW the reason I'm doing this is that I use Notepad++ to design my web pages and they don't have a template or master page ability, at least I don't think they do. And I'm doing all this to save myself time, so if I change something on the frame page I won't have to change it on all the other pages.

Here is the code of the frame page>
<!DOCTYPE html>
<html>
<head>
<title>frame</title>
<script src="frame.js"></script>
</head>
<body>
<!-- container -->
<div id="container">	
  <!-- header -->
  <div id="header">		
  <!-- site title -->
  </div>
  <!-- main -->
  <div id="main">		
    <!-- side nav -->
    <div id="side_nav">
      <!-- nav list -->			
    </div>
    <!-- individual page info -->
    <div id="page_info">
      <iframe id='page' src = 'home.html' onload='readfile()'></iframe>			
    </div>
  </div>
  <!-- footer -->
  <div id="footer">		
    <!-- site end info & bottom nav -->
  </div>		
</div>
</body>
</html>


Here is the code for one of the pages loaded into the iframe>
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h3>Home Page</h3>
<p>Home page info.</p>
</body>
</html>


And here is the java script file>
function readfile() {
    alert(document.getElementById('page').contentdocument.body.firstChild.innerHTML);
	document.title=parent.frames['page'].document.title;	
}


Thanks for reading any advice would be greatly appreciated. :)/>

This post has been edited by boba fett: 26 December 2013 - 02:52 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How do I replace a page's title with an iframe's page's ti

#2 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6338
  • View blog
  • Posts: 25,555
  • Joined: 12-December 12

Re: How do I replace a page's title with an iframe's page's ti

Posted 26 December 2013 - 03:23 PM

This line:
alert(document.getElementById('page').contentdocument.body.firstChild.innerHTML);

will likely cause an error, because it is contentDocument - capital D. However, you may have this capitalised in your original code because, as you can see in the following code line, the DIC editor isn't capitalising the D in these posts.

I am unable to test currently, but I believe the following line could be this:

document.title = document.getElementById('page').contentdocument.title;
// with a capital D!

I am unable to test from the local file system as it is subject to the same origin policy. (Your use of parent.frames will probably also work, I prefer to use the id.)

To make this work cross-browser you could incorporate code like this:

var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.body.style.backgroundColor="red";

http://www.w3schools...entdocument.asp

Bear in mind that this kind of client-side include is discouraged. It is more difficult to maintain than equivalent server-side includes and, I believe, is troublesome for search engines. Using an iframe in this way is also a little clumsy IMO.
Was This Post Helpful? 1
  • +
  • -

#3 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 70
  • Joined: 18-August 13

Re: How do I replace a page's title with an iframe's page's ti

Posted 26 December 2013 - 04:42 PM

**UPDATE!**

I was able to get it to work in Firefox only by placing the following code in the individual files(ie. home.html)>
<script>
         parent.document.title = document.title;
      </script>


Now, in the main or frame.html page the title of the "individual page" that's in the iframe shows in the browser tab.

Unfortunately andrewsw, your
document.title = document.getElementById('page').contentdocument.title;

was not able to create results in any browser. And I'm not sure how to apply it, in the "individual" pages or the main "frame" page, especially your cross browser example. :(/> But, thank you for trying. :)/>

Perhaps if I incorporated multiple versions all at once. :dontgetit:/>

And yes, point taken, I probably should be using a server script to accomplish this. However, was just trying to experiment to see if I could accomplish this feat without. LOL
Was This Post Helpful? 0
  • +
  • -

#4 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 70
  • Joined: 18-August 13

Re: How do I replace a page's title with an iframe's page's ti

Posted 26 December 2013 - 05:03 PM

Ahh, just remembered why. I want to follow strict separation of codes as I was inspired by this post. So, in doing so, in order to have a main template or master file, I would have to load twice, more or less to accomplish this would I not? I am slightly familiar with PHP and have used PHP to connect to and use data from a mySQL database in the past. But, my php file, in order to be truly separate, would have to load an HTML file within another right? Or am I taking the meaning too literal and extreme?

What I'm saying is this: I have a php file say "index.php" that is the main page of my website. Then, I load the frame.html into that which is the main template or master of my site and within that are individual files like home.html, about.html etc. Do you see where I'm going here?

Just trying to make things easier on me for developing.

This post has been edited by boba fett: 26 December 2013 - 05:05 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1