0

I have three frames in single frameset html page. when i saw the view source of the page look like below

<HTML>
<HEAD>
 <TITLE>A simple frameset document</TITLE>
 </HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
  <FRAME src="contents_of_frame1.html">
   <FRAME src="contents_of_frame2.html">
</FRAMESET>
<FRAME src="contents_of_frame3.html">

  </FRAMESET>
</HTML>

but my expectation is i want to display the whole frame source in single page using javascript. thanks

Ben10
  • 3,221
  • 2
  • 34
  • 61
  • Whoa, sorry, i have to say. `The 90's called, they want their frames back` :) – Valamas Jan 09 '14 at 05:44
  • @Valamas-AUS i know but, we need – Ben10 Jan 09 '14 at 05:47
  • I didn't understand your question... You want to convert your frameset to a single page, and load/reload content parts dynamically with javascript ? – Akaryatrh Jan 09 '14 at 05:52
  • @Akaryatrh I have set of frames in index.html page while view source that page I get the result like above code, but i need view source with contents_of_frame1.html, contents_of_frame2.html – Ben10 Jan 09 '14 at 05:56

1 Answers1

1

Like this bookmarklet?

Note:

  1. I use XMP, it is deprecated but should work on most browsers
  2. it will attempt to open a new window so allow it
  3. it assumes the frame contents have <HTML> tags
  4. paste the script into a bookmark URL and execute the bookmark on the page
  5. Tested in Chrome on Windows
javascript:(function() { 
  var htmlContent=[]; 
  for (var i=0;i<window.frames.length;i++) {
    var fr = window.frames[i], doc=fr.contentDocument || fr.document;
    htmlContent.push(doc.getElementsByTagName("HTML")[0].innerHTML);
  }
  var w=window.open('');
  for (var i=0;i<htmlContent.length;i++) {
    w.document.write('Frame '+i+':<hr/><xm'+'p>'+htmlContent[i]+'</xmp><hr/>')
  }
  w.document.close();
})()

Testing with this html

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo by mplungjan</title>
<script type='text/javascript'>
var contents_of_frame1 = '<html><head><title>Frame1</title><script>alert("frame 1")<\/script></head><body>Frame1</body></html>';
var contents_of_frame2 = '<html><head><title>Frame2</title><script>alert("frame 2")<\/script></head><body>Frame 2</body></html>';
var contents_of_frame3 = '<html><head><title>Frame3</title><script>alert("frame 3")<\/script></head><body>Frame 3</body></html>';
</script>
</head>
  <FRAMESET cols="20%, 80%">
    <FRAMESET rows="100, 200">
      <FRAME src="javascript:top.contents_of_frame1" />
      <FRAME src="javascript:top.contents_of_frame2" />
    </FRAMESET>
  <FRAME src="javascript:top.contents_of_frame3" />
</FRAMESET>
</html>

I get this output

Frame 0:

<head><title>Frame1</title><script>alert("frame 1")</script></head><body>Frame1</body>

Frame 1:

<head><title>Frame2</title><script>alert("frame 2")</script></head><body>Frame 2</body>

Frame 2:

<head><title>Frame3</title><script>alert("frame 3")</script></head><body>Frame 3</body>

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • we have insert your javascript in my index page and tested but it display like:output -> Frame 0: Frame 1: Frame 2: but element is not captured. – Ben10 Jan 09 '14 at 06:15
  • The way I wrote it, it is a bookmarklet. It does not run in a page but from the bookmark bar – mplungjan Jan 09 '14 at 09:27