Having trouble with: document.documentElement.outerHTML

vmars316 · January 18, 2022

Greetings ,

In particular this line:

document.getElementById("div1").innerHTML = x;

How can this be fixed ?

<!DOCTYPE html>
<html>
   <body>
      <div id="div1"  ondblclick="myFunction()" contenteditable="true" 
         style="width: 300px; height: 400px; border: 2px solid green;">    
         You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick ..
      </div>
      <script>
         let x = document.documentElement.outerHTML
         function myFunction() {
         alert(x);
         document.getElementById("div1").innerHTML = x;
         }
      </script>
   </body>
</html>

Thanks for your help...

Ingolme · January 18, 2022

Since the variable x is declared outside of the function, its value never gets updated and it only contains a copy of what the page content was when the page first loaded.

If you declare the variable inside of the function, it will make a copy of the page's content at the time that the function was called.

vmars316 · January 18, 2022

Thanks ,

Sorry I didn't explain whats happening :

ondblclick:
alert() works fine .
but 'document.getElementById("div1").innerHTML = x;'
doesnt update 'div1'
Instead looks like the green border gets duplicated at each doubleclick ,
it grows and grows .
What would cause that ?

<!DOCTYPE html>
<html>
   <body>
      <div id="div1"  ondblclick="myFunction()" contenteditable="true" 
         style="width: 300px; height: 400px; border: 2px solid green;">    
         You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick ..
      </div>
      <script>
         let x;
         function myFunction() {
		  x = document.documentElement.outerHTML ;
         alert(x);
         document.getElementById("div1").innerHTML = x;
         }
      </script>
   </body>
</html>

Ingolme · January 18, 2022

You're copying the entire document into the div, which includes a copy of the div itself. Two divs means two green borders stacked on top of each other.

This is the document before clicking:

<!DOCTYPE html>
<html>
   <body>
      <div id="div1"  ondblclick="myFunction()" contenteditable="true" 
         style="width: 300px; height: 400px; border: 2px solid green;">    
         You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick ..
      </div>
      <script>
         let x;
         function myFunction() {
		  x = document.documentElement.outerHTML ;
         alert(x);
         document.getElementById("div1").innerHTML = x;
         }
      </script>
   </body>
</html>

This is the document after you doubleclick:

<!DOCTYPE html>
<html>
   <body>
      <div id="div1"  ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;">

          <html>
             <body>
                <div id="div1"  ondblclick="myFunction()" contenteditable="true" 
                   style="width: 300px; height: 400px; border: 2px solid green;">    
                   You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick ..
                </div>
                <script>
                   let x;
                   function myFunction() {
                    x = document.documentElement.outerHTML ;
                   alert(x);
                   document.getElementById("div1").innerHTML = x;
                   }
                </script>
             </body>
          </html>

      </div>
      <script>
         let x;
         function myFunction() {
		  x = document.documentElement.outerHTML ;
         alert(x);
         document.getElementById("div1").innerHTML = x;
         }
      </script>
   </body>
</html>

This is the document

vmars316 · January 18, 2022

Thanks

Hmm... That's interesting .

How did you manage to get the printout for "This is the document after you doubleclick: ?

Programmatically ?

I think I'll try if I can pop it into an iframe ?

?

Ingolme · January 18, 2022

I just wrote it manually to demonstrate what is happening when you run your code.

If you open your browser tools you can see the page's structure for yourself. In most browsers F12 works, if not you can right-click on the page and select "Inspect element" from the context menu.

vmars316 · January 18, 2022

I made iframe editable , but still cant get x into it (or anywhere else) .

Curses: Why can x show in alert but not anywhere else ?

Any ideas ?

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
    <body contenteditable="true" >
        <div id="div1"  ondblclick="myFunction()" contenteditable="true" 
        style="width: 400px; height: 400px; border: 2px solid green;">    
<iframe src="" style="width: 300px; height: 300px;  border: 3px solid red;" id="iframe">
asdf
</iframe>
.
    </div>
    <script>
window.onload = function(){
   var frameElement = document.getElementById("iframe");
   var doc = frameElement.contentDocument;
   doc.body.contentEditable = true;
}
	
        let x;
        function myFunction() {
        x = document.documentElement.outerHTML ;
        alert(x);
        document.getElementById("iframe").innerHTML = x;
    }</script>
</body>
</html>

Ingolme · January 18, 2022

To write into an iframe, you have to write into its document. Its innerHTML property is never displayed.

The iframe has a contentDocument property which gives you access to the "document" property of the window that the iframe contains.

Here's how to write to an iframe:

let iframeDoc = document.getElementById("iframe").contentDocument;
iframeDoc.innerHTML = "Something";

If you copy the documentElement's outerHTML as you are now, you're going to end up with nested iframes. I'm not sure why you want to embed a copy of the page inside the page.

What would make sense is to have a source for data and a destination for data, then copy the data from the source to the destination as in this example:

<!DOCTYPE html>
<html>
  <body contenteditable="true" >
    <div id="input"  ondblclick="copyContent()" contenteditable="true"
      style="float:left; width: 400px; height: 400px; border: 2px solid green;">
      Edit content here. Double-click to view content in the iframe.
    </div>
    <iframe id="output" style="width:400px; height:400px; border: 2px solid red;"></iframe>

  <script>
    function copyContent() {
      let data = document.getElementById("input").innerHTML;
      let iframeDoc =  document.getElementById("output").contentDocument;
      iframeDoc.documentElement.innerHTML = data;
    }
  </script>
  </body>
</html>

Ingolme · January 18, 2022

16 minutes ago, vmars316 said:

I made iframe editable , but still cant get x into it (or anywhere else) .

Curses: Why can x show in alert but not anywhere else ?

Any ideas ?

The content of "x" is shown anywhere you put it. But it's HTML, so the browser is going to try to render it instead of showing the code.
I'm not sure if what you wanted was to see the code itself, if so then I can provide a solution for that.

vmars316 · January 19, 2022

Thanks Inglome ,

Wow! Look what I found:

I was expecting to find an 'executejavascript' in there but no such thing .

What do you think of this ?

<!doctype html>
<!--Bhaskar Tiwari-->
<html>
<head>
    <meta charset="utf-8">
    <title>Web Editor</title>
</head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="tag">HTML (Body)</div>
                    <div id="html" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">CSS</div>
                    <div id="css" class="content" contenteditable></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="tag">JavaScript</div>
                    <div id="js" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">Output</div>
                    <iframe id="output"></iframe>
                </td>
            </tr>
        </table>
    </body>
</html>
<script>
window.onload=function(){
    var html=document.getElementById("html"),
        css=document.getElementById("css"),
        js=document.getElementById("js"),
        output=document.getElementById("output"),
        working=false,
        fill=function(){
            if(working){
                return false;
            }
            working=true;
            var document=output.contentDocument,
                style=document.createElement("style"),
                script=document.createElement("script");
            document.body.innerHTML=html.textContent;
            style.innerHTML=css.textContent.replace(/\s/g,"");
            script.innerHTML=js.textContent;
            document.body.appendChild(style);
            document.body.appendChild(script);
            working=false;
        };
    html.onkeyup=fill;
    css.onkeyup=fill;
    js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
    border:0;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
td{
    border:2px solid black;
    height:50%;
    padding:25px 5px 5px 5px;
    position:relative;
    vertical-align:top;
    width:50%;
}
div.tag{
    position:absolute;
    right:5px;
    top:5px;
}
</style>

Ingolme · January 19, 2022

It's functional.

vmars316 · January 19, 2022

13 hours ago, Ingolme said:

It's functional.

Aha...Upon further study , its not as magical as I originally thought .

This ' /\s/g, ' must be 'RegularExpression' .

I havent learned that yet .

vmars316 · January 19, 2022

23 hours ago, Ingolme said:

I'm not sure if what you wanted was to see the code itself, if so then I can provide a solution for that.

Yes , please , that would be great !

Ingolme · January 19, 2022

If you set the innerText property instead of innerHTML, the string will be displayed as is instead of being interpreted as HTML.

vmars316 · January 22, 2022

Got it , Thanks

Having trouble with: document.documentElement.outerHTML

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in