Toggle frame within multiple framesets - javascript

Following situation:
<frameset>
<frame id="top"></frame>
<frameset id="innerframe">
<frame id="nav"></frame>
<frame id="main">
<frameset id="homeFrame">
<frame id="content"></frame>
<frame id="box"></frame>
</frameset>
</frame>
</frameset>
</frameset>
(I am not very good at formatting this in SO, bear with me)
I want to toggle (make visible/hidden) the frame "box" with javascript by using a link, which is located somewhere in the frame "nav".
I tried via parent.frames['box'] to access my frame, but no sucess.
How to do it?
Thanks.

I don't know for sure (I don't use frames often) but it seems you have to target your box frame different.
function toggleFrame(elem) {
//elem = <a> clicked on
var fframe = parent.frames['homeFrame'].frames['box'];
if(fframe.style.visibility == 'visible') {
fframe.style.visibility = 'hidden';
elem.value = 'show';
}
else {
fframe.style.visibility = 'visible';
elem.value = 'hide';
}
If this doesn't work it could be because of the nested frameset and than you probably should switch the var to something like var fframe = document.getElementById('box'); or var fframe = parent.getElementById('box');

Related

How can I embed an iframe correctly with JavaScript?

How can I embed an iframe using JavaScript, that's being displayed where the code's being added? The code below displays the iframe ONLY above the footer, no matter where I add the code, whether it's in the header or the body.
var iframe_tag = document.createElement("iframe");
iframe_tag.setAttribute("src", "https://wikipedia.com");
iframe_tag.style.width = "100%";
iframe_tag.style.height = "480px";
document.body.appendChild(iframe_tag);
I know there are simpler ways to show an iframe, but I can only use JavaScript.
When you use document.body.appendChild it is identical to just writing in the new html at the bottom, or literly appending the element to the bottom
This means that regardless of where the script is, it will always do this
instead you should append to a predefined div (<div id="iframecontainer"> </div>)
let container = document.getElementById("iframecontainer");
container.appendChild(iframe_tag);
minimal example:
<!DOCTYPE html>
<html>
<body>
<script>
let iframe = document.createElement("iframe");
iframe.src = "https://wikipedia.com/";
window.onload = () => {
document.body.appendChild(iframe);
}
</script>
</body>
</html
In my opinion you should, instead of creating an appending an element, just set the src of a pre-existing iframe (<iframe id="iframe"> </iframe>)
let iframe_tag = document.getElementById("iframe");
iframe.src = "https://wikipedia.com";
minimal example:
<!DOCTYPE html>
<html>
<body>
<iframe id="iframe"> </iframe>
<script>
let iframe;
window.onload = () => {
iframe = document.getElementById("iframe");
iframe.src = "https://www.wikipedia.com/";
}
</script>
</body>
</html

Send cookie data from parent to iframe

I am trying to send data from my cookies captured on my website into an iframe.
I have 2 separate Google Tag Manager accounts - one for the iframe and one for my website.
How do I send the cookie data into the iframe?
<noscript>
<iframe src="https://test/l/xxxxxx/xxxx-xx-xx/xxxx" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>
<script type="text/javascript">
var form = 'https://test/l/xxxxxx/xxxx-xx-xx/xxxx';
var params = window.location.search;
var thisScript = document.scripts[document.scripts.length - 1];
var iframe = document.createElement('iframe');
iframe.setAttribute('src', form + params);
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', 500);
iframe.setAttribute('type', 'text/html');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowTransparency', 'true');
iframe.style.border = '0';
thisScript.parentElement.replaceChild(iframe, thisScript);
window.parent.getCookie('gclid');
</script>
You could also access parent window window.parent within the iframe.
Illustration
In the main window, assuming you have a cookie called id and you have implemented a utility function called getCookie to get cookie value.
Main Window
getCookie('id') //for instance returns abc
Somewehre in the page loaded by Iframe
window.parent.getCookie('id') //returns same abc from above
It's definitely a work for post messages just in the parent window find your iframe with name and send a message:
<iframe src="http://example.com" name="iframe">
<script>
let win = window.frames.iframe;
win.postMessage("message", "*");
</script>
And then in the iframe window you can subscribe to that messages
window.addEventListener("message", function(event) {
// your logic for messages
});
Here is example.

The iframe in frameset onload

I have frameset included in the iframe onload.
Iframe Trying to onload an iframe...
but, this code is be not fully loaded.
A.jsp is loaded. but frame in frameset is not loaded.
<iframe id = "testFrm" src = "A.jsp"></iframe>
Script
document.getElementById('testFrm').onload = function(){
console.log('test');
}
A.jsp
<frameset>
<frame src = "a.jsp"></frame>
<frame src = "b.jsp"></frame>
</frameset>
Is there a way to load the entire page of the iframe?
How about using a simple counter to measure how many frames have loaded?
// <frame> elements
var frames = document.querySelectorAll("#my-frameset frame");
// total frames loaded - initially 0
var framesLoaded = 0;
for (var i = 0; i < frames.length; i++) {
frames[i].onload = function() {
framesLoaded++;
if (framesLoaded === frames.length) {
// all frames loaded
}
}
}

Get parent of clicked tag inside of iframe

I've an iframe that contain an HTML page.Now I want to get class of the parent item that clicked.
this is my ifram:
<iframe src="//example.com" id="frame" ></iframe>
this is css:
#frame{ width:380px; height:420px;}
this is my script:
$(document).ready(function() {
var iframe = document.getElementById('frame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document.body;
$(innerDoc).on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert(innerDoc.getElementById(thisID));
$(thisID).click(function() {
var Allclassnames = $(thisID).parent();
console.log(Allclassnames);
});
});
});
but it return the item was clicked only.how to fix it?
Demo:DEMO
NOTE:these are in a same domain.maybe below DEMO not worked for this reason.but I'm sure that my HTML is inside of the same domain with my web site.
thank you.
Add sandbox attributes to the iframe
<iframe src="/example.html" id="frame" sandbox="allow-scripts allow-same-origin"></iframe>
Change the script to
<script>
$('#frame').load(function() {
$('#frame').contents().on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert($('#'+thisID,this));
$('#'+thisID,this).click(function() {
var Allclassnames = $(this).parent();
console.log(Allclassnames);
});
});
});
</script>
Make sure that every element in frame doc. have some id or else the alert() may throw an error.
To see the console message of iframe you need to change the scope from the scope dropdown , it's in console tab besides the filter icon in the chrome developer tools.
You cannot interact with the contents of an iframe unless it is on the same domain as the parent document.
See:
https://en.wikipedia.org/wiki/Same-origin_policy

Javascript: How to resize frame?

How to, using JavaScript, resize frame inside frameset?
I've found jQuery slideUp (http://api.jquery.com/slideUp/) function very useful, however it's not possible to implement it to work with the frame.
To resize a frame, you'll have to change the rows/cols -attribute of the parent frameset-element.
Short example:
<html>
<head>
<script>
window.onload=function()
{
var frame=window.frames[0];
frame.document.open();
frame.document.write('<input type="button" \
onclick="parent.fx()" \
value="resize this frame to 150px height">');
frame.document.close();
}
var i=50;
function fx()
{
timer=setInterval(
function()
{
if(i>150)
{
clearTimeout(timer);
}
else {
document.getElementsByTagName('frameset')[0]
.setAttribute('rows',(i++)+',*');
}
}
,20)
}
</script>
</head>
<frameset rows="50,*">
<frame src="about:blank"/>
<frame src="about:blank"/>
</frameset>
</html>

Categories