Tia;
I know I can do this:
function myFunction() {
document.getElementById(“demo”).innerHTML = “Hello World”;
}
But how can I edit (input) or (textArea) programatically;
I mean Edit as in copy/paste ?
Programatically want to examine each line and insert code .
HTML nodes have innerHTML. input fields have value.
Examine each line of what though – of the clipboard?
Tia;
Yes , know .
function myFunction() {
document.getElementById(“myText”).value = “Johnny Bravo”;
}
But how can I edit (textArea)
searching “html text” line by line , until I find (head) then INSERT (script)…code(/script) ?
That’s my real question .
Oh you’re asking how do you SELECT a textarea that has no defining qualities such as an ID?
if it’s the only one on the page:
document.querySelector('textarea')
you can also use querySelectorAll to return an array of matches.
The selector string in this case follows all rules for CSS selectors.
If you want to get the head element there’s no need to parse the HTML line by line, you can get a direct reference via document.head; and to execute random JS code, you’d have to create a script element and append it to the document like so:
<textarea id="user-script"></textarea>
<button id="apply-script">apply</button>
<script>
const userScript = document.getElementById('user-script')
const applyScript = document.getElementById('apply-script')
applyScript.addEventListener('click', () => {
const script = document.createElement('script')
script.textContent = userScript.value
document.head.appendChild(script)
})
</script>
Oh , that would be great !
But I was thinking that because its only text and not an active html page , that I couldn’t use the normal js tools (document.getElementById(“myText”).value) .
I was thnking I might have to dump all the text into an array line by line . Then check each array item , and if no (head) line , then add/insert (head) (script)…js code(/script) to array item . Then save (textArea) as *.html . And maybe fire up the (script) with (body onload=)
Then .window.open’ it in a Brower .
Are you super sure that I can use this stuff ‘document.getElementById(“demo”).innerHTML’ on just plain text ?
It would be great if I have access to (iframe) with ‘document.getElementBy?’
How would I reference to (iframe) ?
Thanks
No, sorry I misunderstood you then; you can however parse a plain text string to a HTML document using a DOMParser:
const parser = new DOMParser()
const doc = parser.parseFromString(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
`, 'text/html')
const script = document.createElement('script')
script.textContent = 'console.log(42)'
doc.head.appendChild(script)
console.log(doc.documentElement.outerHTML)
This also gives you all the regular query methods, such as doc.querySelector('iframe').
Thanks;
Ok , I am close , but how do I reference <a> inside of iframes ? This doesn’t work:
x = iframe.document.querySelectorAll(“a”);
Testing-iframe-01.html:17 Uncaught ReferenceError: iframe is not defined
at myFunction (Testing-iframe-01.html:17)
at HTMLButtonElement.onclick (Testing-iframe-01.html:8)
<!DOCTYPE html>
<html>
<body>
<a href="http://vmars.us/KidSafeBrowser/SafeBrowserHome.html">http://vmars.us/KidSafeBrowser/SafeBrowserHome.html</a>
<br><br>
<iframe id="myFrame" width="800" height="200" src="http://vmars.us/KidSafeBrowser/SafeBrowserHome.html"></iframe>
<p>Click the button to change the value of the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x, i;
x = document.querySelectorAll("a");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
x = iframe.document.querySelectorAll("a");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
// document.getElementById("myFrame").src = "http://vmars.us/KidSafeBrowser/SafeBrowserHome.html";
}
</script>
</body>
</html>
Thanks
[off-topic]
@vmars316 when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
[/off-topic]
2 Likes
You need to query for the iframe and assign it to a variable:
var iframe = document.getElementById('myIframe')
// ...
BTW in order to access elements inside an iframe, you have to use its contentDocument property:
var links = iframe.contentDocument.querySelectorAll('a')
Note that this only works if the iframe has the same origin as the parent page though.
Oh , that’s terrible news .
If I know the URL before requesting the internet page ,
can I set the origin the origen to that URL ?
Thank
Thanks for your patience:
It seems like origin blocks some sites from loading but lets other internet sites load .
Can you tell me why ?
Please click on link:
http://vmars.us/KidSafeBrowser/iframes.html
Look at the last (iframe) ,
then click on the link that says “http://vmars.us/” .
Pls notice that (iframe) allows this internet site to load . Most sites don’t load , BUT several sites do load .
Pls , Why is that so ?
Thanks
The origin by itself doesn’t block anything; you just can’t access the iframe content with JS if it has a different origin than the parent page. However, pages can prevent from being embedded as an iframe; this can be done on the server as well as on the client side. Do you have an example of a page that you want to embed but is getting blocked?
Yes , http://vmars.us/KidSafeBrowser/iframes.html
Please click on link:
http://vmars.us/KidSafeBrowser/iframes.html
Look at the last (iframe) on page ,
then click on the link that says “http://vmars.us/” .
Pls notice that (iframe) allows this internet site to load . Most sites don’t load , BUT several sites do load .
And also , here is the code;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myIframes {
width: 100%;
height: 200px;
}
#myIframesThisHtml {
width: 100%;
height: 600px;
}
p {
font-size: 4px;
width: 100%;
}
</style>
</head>
<body>
<h4 style="text-align: center;">Source codes for KidSafeBrowser</h4>
<br>
<h5 style="text-align: center;">index.html</h5>
<p style="text-align: center;"> (To see source code for index.html , right-click on frame , then Click on 'view frame source') </p>
<div>
<iframe id="myIframes" src="http://vmars.us/KidSafeBrowser/index.html">Loading...</iframe>
</div>
<h5 style="text-align: center;">main.css</h5>
<div>
<iframe id="myIframes" src="http://vmars.us/KidSafeBrowser/main.css">Loading...</iframe>
</div>
<h5 style="text-align: center;">main.js</h5>
<div>
<iframe id="myIframes" src="http://vmars.us/KidSafeBrowser/main.js">Loading...</iframe>
</div>
<h5 style="text-align: center;">package.jason</h5>
<div>
<iframe id="myIframes" src="http://vmars.us/KidSafeBrowser/package.json">Loading...</iframe>
</div>
<h5 style="text-align: center;"> renderer.js</h5>
<div>
<iframe id="myIframes" src="http://vmars.us/KidSafeBrowser/renderer.js">Loading...</iframe>
</div>
<h5 style="text-align: center;"> SafeBrowserHome.html </h5>
<div>
<iframe id="myIframesThisHtml" src="http://vmars.us/KidSafeBrowser/SafeBrowserHome.html ">Loading...</iframe>
</div>
</body>
</html>
Thanks
Yes some of those links do not allow embedding; for example, google.com sets the X-Frame-Options header to SAMEORIGIN, so it can only be embedded on pages with the same origin:
Hmm…
Thanks m3g4p0p ;
I’ll mull this over a while .
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.