How to get parent iframe element from inner page without knowing id? - javascript

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

Related

How can I make the <iframe> tag react to a variable? (2)

I've been trying to do something, described here.
Someone answered it, and I tried it.
Well, the result is the iframe flashing every second.
This is the code:
<!DOCTYPE html>
<body>
<script type="text/javascript">
function iframeDidLoad() {
var website = "https://bing.com"
document.getElementById('myIframe').src = website;
}
</script>
<iframe
width="500"
height="500"
onLoad="iframeDidLoad();"
src=""
id="myIframe"
></iframe>
</body>
</html>
Can anyone fix it?
In javascript, you always set the variable name equal to whatever you assign it to, so use for example:
var myFrame=document.getElementById('myIframe');
And not the other way around.
Also, given that you use .src I guess you may misunderstood the functionality of the function, have a look at https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
To display your page in it, afterwards use
myFrame.setAttribute('src','<linktoyourpage>');
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
UPDATE
<!DOCTYPE html>
<body>
<input type="text" id="typed-site"/>
<button onclick="showSite()">Display Typed Site</button>
<iframe
width="500"
height="500"
src=""
id="myIframe"
></iframe>
<script type="text/javascript">
function showSite() {
let retrievedSite = document.getElementById('typed-site').value;
document.getElementById('myIframe')
.setAttribute("src",retrievedSite);
}
</script>
</body>
</html>

How to find specific element inside nested iframes

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>

One link opens two Iframe targets on same page

I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.
From my research, it seems this should be possible with some JS but I'm struggling to figure it out.
So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?
<iframe src="" name="gallery"</iframe>
<iframe src="" name="info"</iframe>
Lot 1
Lot 2
You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through JS).
For example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']];
function setSource(num) {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource(0);">Click me #0</span>
<span onclick="javascript: setSource(1);">Click me #1</span>
</body>
</html>
Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.
Please don't forget to close your tags.
Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).
The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.
This code works simply great :
<!DOCTYPE html>
<html>
<body>
<h1 style="display:flex;
justify-content:center;color:green;">
GeeksforGeeks
</h1>
<iframe src="about:blank" id="frame1"> </iframe>
<iframe src="about:blank" id="frame2"> </iframe>
<button id="update">Click me</button>
<script>
document.getElementById('update').addEventListener('click', function () {
// Change src attribute of iframes at a same time
document.getElementById('frame1').src ='https://www.google.com/search?q=java&igu=1';
document.getElementById('frame2').src ='https://www.google.com/search?q=farming&igu=1';
});
</script>
</body>
</html>

how can i use javascript to remove iframe's html tag?

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.doc‌​ument.getElementsByT‌​agName("html")[0].re‌​move();

Prevent browser from loading a custom frameset in an iframe's document

I have been trying to communicate two iframes from same domain which are loaded in a page from another domain.
The problem is browser creates a custom frameset over the content of iframe.
I cant retrieve the iframe names from within the iframe using parent.iframes[x].name because the script addresses frameset as the parent.
Below is my actual html code -
<html>
<head>
</head>
<body>
<p>iframe1</p>
<script type="text/javascript">
var frames = parent.frames;
for(var i=0; i < frames.length; i++)
{
if(frames[i].name != "undefined")
alert(frames[i].name);
}
</script>
</body>
</html>
Below is what browser generated -
<!--inside iframe-->
<html>
<head></head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
<!--actual document goes inside frame tag-->
<frame name="TopFrame" scrolling="yes" noresize="" src="http://abnormalz.stuffshake.com/fframe.html">
<frame name="BottomFrame" scrolling="no" noresize="">
<noframes></noframes>
</frameset>
</html>
Is there any solution to this problem ?
You can check the test at http://stuffshake.com/parent.html
Just use localStorage or sessionStorage. Since both iframes are from the same domain, they share the same localStorage. LocalStorage sends events if a value was modified.
Supported as of IE8.

Categories

Resources