I have an app which I am inserting another app using iframe as follows
Parent App
<HTML>
....
<body>
<iframe firstname="Trump" src="https://on.co/onboarding/" height="600" allowfullscreen="" >
</iframe>
</body>
</html>
Children App
<HTML>
....
<body>
<h1> Covid is deadly if you doubt ask the indians </h1>
<script>
const urlParams = new URLSearchParams(document.location.search);
const myParam = urlParams.get('firstname');
console.log(myParam) //undefined
</script>
</body>
</html>
I would like to get the first name from the iframe URL parameters
I get undefined
What is wrong here?
I think you just need:
<iframe src="https://on.co/onboarding/?firstname=SomeName" height="600" allowfullscreen=""></iframe>
It sounds like you're trying to get an element attribute, not a url parameter. You can get attributes using the getAttribute method on an element, e.g.
const myIframe = document.querySelector('iframe');
const firstname = myIframe?.getAttribute('firstname');
See https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Note however that the firstname attribute is useless on an iframe, so you should reconsider how you got it there in the first place.
Related
I want to popup iframe src(domain) when script load.
I code simple code but it does not working.
<html>
<title>Iframe load</title>
<iframe src="https://evil.com/" id="site" width="800px" heigth="700px"></iframe>
<script>
var siteD = document.getElementById("site");
alert(siteD);
</script>
</html>
When page load its only showing me [object HTMLIFrameElement]. But i want to show in popup evil.com from src. I hope you understand my question.
The cause: alert() wants to show a string, which is why it applies toString() to its parameter, and that does not render any of the properties of the object.
You need to use alert(siteD.src); instead:
var siteD = document.getElementById("site");
alert(siteD.src);
<iframe src="https://evil.com/" id="site" width="800px" heigth="700px"></iframe>
There's a simple answer to your question, siteD has a property src which you need to be alerting instead of siteD on its own.
Here is an example with src as property: https://codepen.io/dwaynehulsman/pen/rNxYYWQ
I need to find a specific element, which is inside an iframe, from a parent component, the structure would be something like this: (Just an example)
Edit: See comments below concerning the nature of this example
<iframe id ='if1'>
<iframe id ='if2'>
<iframe id ='if3'>
<iframe id ='if4'>
<input type='hidden' id ='elementToBeFound'>
</iframe>
</iframe>
</iframe>
</iframe>
Now, how can i do this with javascript? (Can also be jquery or another helper)
I have a reference to the first iframe ('if1'), i wanted to search all child nodes until i found 'elementToBeFound'.
Is this possible?
Thanks in advance.
My question is different from the existing ones, because i want to access multiple iframes inside iframes, not only one level.
I belive that something like this should work:
const elem = document.getElementById('if1').contentDocument
.getElementById('if2').contentDocument
.getElementById('if3').contentDocument
.getElementById('if4').contentDocument
.getElementById('elementToBeFound')
But for sure all windows should be loaded to do that. In real workld it may be more complicated you will need to listen for load event for each iframe to be able to check what is inside.
You can use this function to query for any element on the page, regardless of if it is nested inside of an iframe:
function querySelectorAllInIframes(selector) {
let elements = [];
const recurse = (contentWindow = window) => {
const iframes = contentWindow.document.body.querySelectorAll('iframe');
iframes.forEach(iframe => recurse(iframe.contentWindow));
elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
}
recurse();
return elements;
};
querySelectorAllInIframes('#elementToBeFound');
Note: Keep in mind that each of the iframes on the page will need to be of the same-origin, or this function will throw an error.
You can get the div element by using iframe.contentWindow call.
Here is the example:
NOTE : You have to use "src" (external iframes) to make it work
<!DOCTYPE html>
<html>
<head>
<title>IF1</title>
</head>
<body>
<iframe id='if1' src="./iframe2.html">
<!-- <iframe id='if2'>
<iframe id='if3'>
<iframe id='if4'> -->
<!-- <div id='elementToFind'>Hello</div> -->
<!-- </iframe>
</iframe>
</iframe> -->
</iframe>
<script>
window.onload = function() {
let if1 = document.getElementById('if1').contentWindow;
let if2 = if1.document.getElementById('if2').contentWindow;
let div = if2.document.getElementById('elementToFind');
console.log(div)
}
</script>
</body>
</html>
I want to remove iframe's content but keep the "iframe tag" unchanged
like:
<iframe>
<html>
...
</html>
</iframe>
change to
<iframe>
</iframe>
I tried this:
var frame_node = document.getElementsByTagName("iframe")[0];
frame_node.removeChild(frame_node.firstChild);
But I got an error: frame_node.firstChild is not an object
So how to do this?
thx
got the answer:
document.getElementsByTagName("iframe")[0].contentWindow.document.getElementsByTagName("html")[0].remove();
I am fairly new to JavaScript and I am trying to get value of a variable from an embedded iframe. I have resorted to basic testing to make sure I am getting the method right...
I have tried the common suggestions and everything returns 'undefined'. I want to use the variable in an onclick event.
In the iframe content I have stripped everything and just for testing have this:
<script>
var test = "test";
</script>
in the parent window I have done this:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
var myVar = window.frames[0].window.test;
</script>
Click
I have tried the options suggested here: grab global variable from an embedded iframe
Everything I do returns undefined... am I doing something fundamentally wrong?
Thanks in advance..
You are already executing the script when the <iframe> is still loading, so it's test is undefined. Either wait for the iframe's load event, or just get the variable when clicking:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
var myFrame = window.frames[0].window;
</script>
Click
You're apparently not waiting for the frame's content to be loaded before accessing myVar. Chances are the <script> element in the frame has not yet been fetched or executed when you do that.
Try delaying the variable assignment until the frame's content is fully loaded:
<iframe src="iframe.html" id="iframe" onload="frameLoaded();" width="200" height="100"></iframe>
<script>
var myVar;
function frameLoaded() {
myVar = window.frames[0].window.test;
}
</script>
As an aside, since your question is tagged jquery I would suggest you write something like:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
$("#iframe").on("load", function() {
var myVar = this.window.test;
$("#link").on("click", function() {
alert(myVar);
});
});
</script>
try to use this
<iframe src="iframe.html" id="iframe" onload="loader()" width="200" height="100"> </iframe>
<script>
var myVar
function loader(){
myVar = window.frames[0].window.test;
}
</script>
Click
In the aside solution I just wanted to point out that when you use the jquery onload event handler function and you want to access the jquery "this" object you have to use the $(this.attr) notation.
Let's imagine that I have something like this:
<html>
...
<div>
<iframe src="test.html" hash="r4d5f7"></iframe>
<iframe src="test.html" hash="8f7x97"></iframe>
<iframe src="test.html" hash="gg4v5e"></iframe>
<iframe src="test.html" hash="e54f87"></iframe>
</div>
...
</html>
test.html is empty page, custom hash attribute always has a different value, both pages are on the same domain for security reasons, number and order of iframe elements is random.
My question is: Is there a way to get from inner page (test.html) using Javascript to its proper iframe element? Let's say, I'm in the third iframe's page and I need to get to its iframe element and alert() hash value (in this case "gg4v5e").
To be more specific. If you are familiar with Firefox's Firebug, it visualizes this situation like this:
<html>
...
<div>
<iframe src="test.html" hash="r4d5f7">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="8f7x97">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="gg4v5e">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="e54f87">
<html>
...
</html>
</iframe>
</div>
...
</html>
Is it possible to call "something" in order to get parent element (<iframe>) when I'm with my Javascript at <html> element in inner page?
Sure there is.
This code works in FF and IE6, Opera, Chrome (requires a web server and both files coming from same domain protocol and port)
function getHash() {
var ifs = window.top.document.getElementsByTagName("iframe");
for(var i = 0, len = ifs.length; i < len; i++) {
var f = ifs[i];
var fDoc = f.contentDocument || f.contentWindow.document;
if(fDoc === document) {
alert(f.getAttribute("hash"));
}
}
}