SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use IFrame to create Back Button affect for DHTML

    Hello

    I am trying to put together a proof of concept. What I am trying to prove is that a back button affect can be accomplished using DHTML and an IFrame. Here is the concept, as the user changes data, that data can be written to an IFrame. Then, when the user hits the back button, contents can be taken from the IFrame using history.back() since the IFrame should remember the content written to it just like a page would.

    Here is my problem. The below code writes the content entered into the text box into the IFrame. But when I click the button to execute the history.back(), the value returned is undefined.

    I think my problem might be that the code which writes the contents of the text box to the IFrame is doing that dynamically, so the page is not caching it. If this is correct, how can I write the dynamically entered content from the text box to the IFrame so it can be cached by the IFrame window?

    Thanks in advance for your time.

    Here is my code…

    Code:
    <html>
    <head>
    <script language="JavaScript">
    function remember()
    {
    	document.getElementById("historyFrame").contentWindow.document.body.innerHTML = document.getElementById("inputText").value; 
    }
    
    function displayPrevValue()
    {
    	alert( frames[ "historyFrame" ].history.back() );
    }
    </script>
    </head>
    <body onLoad="document.getElementById('inputText').focus();">
    <input type="text" id="inputText" />
    <input type="button" value="Remember" id="Remember" onClick="remember();" />
    <input type="button" value="Do Not Remember" id="NoRemember" />
    
    <br><br><br>
    
    <input type="button" value="Previous Value" id="prevValue" onClick="displayPrevValue();" />
    
    <br><br><br>
    
    <iframe name="historyFrame" id="historyFrame"></iframe> 
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK… I have something working but if you know of a better way, it would be great to get some feedback.

    Here is the code.

    Code:
    <html>
    <head>
    <script language="JavaScript">
    function remember()
    {
    	var iframe = frames["historyFrame"];
    	var newContent = document.getElementById("inputText").value;
    	
    	//-- Output to iframe
    	iframe.document.open();
    	iframe.document.write( "<html><body>" );
    	iframe.document.write( newContent );
    	iframe.document.write( "</body></html>" );
    	iframe.document.close();
    }
    
    function displayPrevValue()
    {
    	frames[ "historyFrame" ].history.back();
    }
    </script>
    </head>
    <body onLoad="document.getElementById('inputText').focus();">
    <input type="text" id="inputText" />
    <input type="button" value="Remember" id="Remember" onClick="remember();" />
    <input type="button" value="Do Not Remember" id="NoRemember" />
    
    <br><br><br>
    
    <input type="button" value="Previous Value" id="prevValue" onClick="displayPrevValue();" />
    
    <br><br><br>
    
    <iframe name="historyFrame" id="historyFrame"></iframe> 
    </body>
    </html>

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After more research… here is what I have.

    Code:
    <html>
    <head>
    <script language="JavaScript">
    function remember()
    {	
        var newContent = document.getElementById( "inputText" ).value;
        var tempHTML = "<html><body><input type='text' id='remData' value='" + newContent + "'/></body></html>"
    	
        var iframe = document.getElementById( "historyFrame" );
        var doc = iframe.contentDocument;
        
        if ( doc == undefined || doc == null )
        {
            doc = iframe.contentWindow.document;
        }
    	
        doc.open();
        doc.write( tempHTML );
        doc.close();
    }
    
    function displayPrevValue()
    {
        document.getElementById( "historyFrame" ).contentWindow.history.back();
    }
    
    function getData()
    {
        alert( "value = " + document.getElementById( "historyFrame" ).contentWindow.document.getElementById( "remData" ).value );
    }
    </script>
    </head>
    <body onLoad="document.getElementById('inputText').focus();">
    <input type="text" id="inputText" />
    <input type="button" value="Remember" id="Remember" onClick="remember();" />
    <input type="button" value="Do Not Remember" id="NoRemember" />
    
    <br><br><br>
    
    Iframe:
    <br>
    <input type="button" value="Previous Value" id="prevValue" onClick="displayPrevValue();" />
    <input type="button" value="Get Value" id="getValue" onClick="getData();" />
    
    <br><br><br>
    
    <iframe name="historyFrame" id="historyFrame"></iframe> 
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •