iframe.document.documentElement.outerHTML ?

vmars316 · February 14, 2021

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

Ingolme · February 14, 2021

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");

vmars316 · February 14, 2021

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

Ingolme · February 14, 2021

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.

vmars316 · February 16, 2021

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

Ingolme · February 17, 2021

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.

Sign In

iframe.document.documentElement.outerHTML ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity