Suppose we have frameset of with 2 frames, one frame is kind a tiny horizontal header and second is kind of "content" frame with 3rd-party html page inside. When user clicks on some link inside "content" frame, the whole page (frameset) should be reloaded with this link, the same behavior if "content" frame has "target=_top" attribute. How to do this using JS?
The main problem here is - that I can't edit html of "content" page.
Try setting window.location to the target URL.
Here is my quick solution:
<html>
<head>
<script type="text/javascript">
function load(){
// set target="_top" to reload whole frame
var links = this.content.document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
var link = links[i];
link.target="_top";
}
}
</script>
</head>
<frameset rows="50,*" frameborder="0" onload="load()">
<frame src="/header.html" scrolling="no">
<frame src="/content.html" name="content">
</frameset>
</html>
Related
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>
I have a website called A i want to display another website called myFrame through A using iframe i want to count all the clicks in myFrame and want to display in my website A.myFrame site is in different domain.I did the following code but its not working.
i can add any javascript code in myFrame website
<html>
<body>
Count: <span id="clicks">0</span>
<iframe id="myframe" src="http://www.myFrame.com" class="restricted" height="400px;" width="400px;" scrolling="no" frameborder="0">
</iframe>
</body>
</html>
<script language="javascript">
$(function() {
var clicks = 0;
$('#myframe').contents().find('a').bind('click', function(e) {
e.preventDefault();
clicks++;
$('#clicks').html(clicks);
});
});
</script>
It is impossible. Same origin policy prevents you from monitoring/accessing anything in another domain.
For a frameset, i want to open a link from page of A frame by using onmouseover and open it in another B frame? when mouseover the link from A frame, it will open the page on B frame. Give a hint.
When I worked with <frame> it has taking a long time ago (seven or more years).
Because you didn't post any html sourcode :-|, I created a theoretical situation:
<html>
<head>
<script type="text/javascript">
function nullRand () {
//document.getElementById("frameBid").src = "myNewInternalPage.html";
document.getElementById("frameBid").src = document.getElementById("frameAid").src;
}
</script>
</head>
<frameset cols="25,*" frameborder="no" border="0" framespacing="0" framepadding="0">
<frame id="frameAid" name="frameAname" src="myHtmlFile.html" noresize>
<frame id="frameBid" name="frameBname" src="" noresize>
</frameset>
</html>
SIn my theoretical file 'myNewInternalPage.html' you have to instert the method call
An link
Note: frame is not approiate to show external content. That's why iframe exists.
Update:
After a hard fight with the OP I got something to my hands. Here is a solution:
1st: Replace the old Javascript code from 'nullRand()' with the new one
function nullRand (linkObject)
{
document.getElementById("frameBid").src = linkObject.href; // The new way to access to a frame
//top.frames["center"]..src = linkObject.href; <-- The old way to access to a frame */
}
2nd: Modyfiy the a tag -where the radio streams are listed- as follow:
...
So it should work. In my eyes you should think about a new concept for your task.
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.
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"));
}
}
}