Jump to content

iframe.document.documentElement.outerHTML ?


vmars316
 Share

Recommended Posts

Hello ;

I want to show    iframe.document  in parent html , but I only get an

"Uncaught ReferenceError: iframe is not defined"  error . 

Pls , what am I doing wrong ?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Opening Links in an iFrame</title>
	<style>
		iframe {
			width: 100%;
			height: 500px;
		}
		button {display: inline-block;}
		iframe { width="100%";}
	</style>
</head>
<body>
    <p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements
<button  onclick="Function_1()">1</button>
<button  onclick="Function_2()">2</button>
<button  onclick="Function_3()">3</button>
<button  onclick="Function_4()">4</button>
	<p id="paragraph_1">  empty  </p>
    <iframe src="SomeLocalLinks-01.html" name="myFrame"></iframe>
<script>
	var links = myFrame.document.querySelectorAll( 'a' );
	for ( var c = 0; c < links.length; c ++ ) {
         links[c].addEventListener('click', WhichLinkWasClicked);
      }
function WhichLinkWasClicked(evt) {
    alert( evt.target ) ; 
    evt.preventDefault();
		}
</script>
<script>
function Function_1(){
alert("Function-1()")
  var showThis = iframe.document.documentElement.outerHTML
  console.log(showThis);
  document.getElementById("paragraph_1").innerHTML = showThis ;
}
</script>
<script>
function Function_2()
{
alert("Function-2()")}
</script>
<script>
function Function_3(){
alert("Function-3()")}
</script>
<script>
function Function_4(){
alert("Function-4()")}
</script>

</body></html>

Thanks

Link to comment
Share on other sites

The variable iframe hasn't been declared. You should assign a reference to the <iframe> element to it, for example:

var iframe = document.querySelector("iframe");

 

Link to comment
Share on other sites

This :

function Function_1(){
alert("Function-1()")
//  var showThis = iframe.document.documentElement.outerHTML
  var myIframe = document.querySelector("iframe");
  myIframe = iframe.document.documentElement.outerHTML
  console.log(myIframe);
  document.getElementById("paragraph_1").innerHTML = myIframe ;
}

yields this
"ReferenceError: iframe is not defined"

This

function Function_1(){
alert("Function-1()")
//  var showThis = iframe.document.documentElement.outerHTML
  var iframe = document.querySelector("iframe");
  iframe = iframe.document.documentElement.outerHTML
  console.log(iframe);
  document.getElementById("paragraph_1").innerHTML = iframe ;
}

yields this:
Cannot read property 'documentElement' of undefined
 

Link to comment
Share on other sites

You don't seem to have a full grasp on how Javascript works, I recommend spending more time studying the Javascript tutorial.

The second example is more correct, but you're making things confusing by assigning two completely different things to the same variable. "iframe" is a variable and you could name it anything you want and assign any value to it. I would recommend, to prevent things from being confusing, that you only assign an actual iframe object to it and not anything else like "outerHTML" which is just a string.

The actual reason that the second block of code is not working is that HTML <iframe> elements don't have a "document" property. You can see the list of properties that the iframe has in this reference page: https://www.w3schools.com/jsref/dom_obj_frame.asp

Using the reference page shown above to determine which iframe property will solve your problem.

Link to comment
Share on other sites

Quote

I recommend spending more time studying the Javascript tutorial

 

Yes I am working on it .

All day this one has me stumped: 

Quote

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Opening Links in an iFrame</title>
<body>
<h3>Access an iframe</h3>
<button onclick="changeStuff()">Change Stuff</button >
<hr>
<br><br>
<iframe id=myIFrame"  src="file:///C:/Electron-js/___KidSafeBrowser-020121/Frames_Study/Adjusted-For-Local-Folder/SomeLocalLinks-01.html" ></iframe>
<br><br>
<script>
// GET REFERRENCE TO iframe: tell javascript there is such an entity as iframe 
    const  myIframe = document.getE1ementById("myIframe") ;
function changeStuff(){
    const iframeWindow = myIframe.contentWindow ;
    console.log(iframeWindow)
/*
    alert(iframeWindow)
    const iframeDocument = myIframe.content.Document;
    console.log(iframeDocument)
    const iframePara = iframeDocument.query("p")

    iframeDocument.body.style.backgroundColor = lightgreen ;
    iframepara.textContent = "This is now lightgreen!" ;
*/
    }
</script>
</body></html>

This line:

const  myIframe = document.getE1ementById("myIframe") ; 

What's wrong  with it ? 

Thanks

Link to comment
Share on other sites

The ID is case-sensitive, so differences between uppercase and lowercase letters will cause problems. Make sure that the element's ID and the one in the function call are identical.

The <iframe> HTML is also invalid, so the ID might not be registered properly by the browser.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...