I would like to close an iframe using a button that exists inside that iframe.
I have these two files, index.html and contents.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
a {
postion: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<iframe id="outerIframe" src="./contents.html" width="1000px" height="1000px"></iframe>
<div class="behind">
Mark Behind
</div>
</body>
</html>
contents.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.big-box {
height: 500px;
width: 500px;
background-color: #666;
}
</style>
</head>
<body>
<div class="big-box">
<button class="closer" type="button" name="button">Click to close</button>
</div>
<script type="text/javascript">
var button = document.querySelector('.closer');
button.addEventListener('click', function() {
document.getElementById('outerIframe').style.display = "none";
});
</script>
</body>
</html>
When I click the button, I get an error in the console that says "Cannot read property 'style' of null. I understand that means my attempt to get the iframe was not successful. How would I get the iframe this button resides in so that I can change the styles on it?
Need to traverse up to parent window. An iframe has it's own window
Try
button.addEventListener('click', function() {
window.parent.document.getElementById('outerIframe').style.display = "none";
});
DEMO
Related
I want to make a javascript (a javascript animation) as a preloader for a website for my project.
Something along the lines of this:
http://soulwire.github.io/Plasmatic-Isosurface/
I want this to run first and until the elements of my page are downloaded and after that it should turn off and show the completely loaded page
Is this possible?
Thanks
Here's a sample HTML Code I want to test it on
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preloader"></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
</html>
**EDIT TO CODE APOLOGIES
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Preloader Testing</title>
<style>
.preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="preloader" id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
You can show the preloader by default. And once the web page is completely loaded, you just hide it. Here is a code sample
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
<style>
/*Styling preloader*/
.preloader{
/*
Making the preloader floating over other elements.
The preloader is visible by default.
*/
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
</head>
<body>
<div class="preloader"><span class="preloader-js"></span></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
Thanks
Put everything you need for your animation in a div with an id and everything you need for your content in another. Give your content display: none in your stylesheet. Now you can use window.onload to change the styles document.getElementbyId().style.display = none/inline
So I'm being asked to create a side by side "frame" in html. When content from the iframe on the left is selected, it populates the link in an iframe next to it on the same page.
Additional background: The left hand side is the menu bar generated from Tableau and the right hand side would be the visualization attached. Using target like in the code below hasn't worked:
<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>
Any advice is much appreciated.
Assuming you control both pages, you can message between the iframes with postMessage, with the left window messaging the parent and the parent messaging the right child, an example is below:
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe src="right.html" class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source) {
r.contentWindow.postMessage(e.data, '*')
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="clickEvent()">SEND</button>
</body>
<script>
function clickEvent() {
window.top.postMessage({"payload": "Hello from the other side"}, '*')
}
</script>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<script>
window.onmessage = function(e){
if (e.source == window.top) {
if (e.data["payload"]) {
alert(e.data["payload"]);
}
}
}
</script>
</html>
Edit - Pure navigation answer
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source && e.data["payload"]) {
r.src = e.data["payload"]
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="navigate('http://www.bing.com')">BING</button>
<button onclick="navigate('http://www.example.com')">EXAMPLE</button>
</body>
<script>
function navigate(url) {
window.top.postMessage({"payload": url}, '*')
}
</script>
</html>
I have an inside.html which is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<button id="mybutton">Click</button>
</body>
<script>
$(document).ready(function() {
parent.changeName("init");
});
$("#mybutton").click(function(e) {
parent.changeName("changed");
})
</script>
</html>
It is loaded by an iframe from outside.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<iframe src="inside.html" style="overflow: scroll; position: absolute; width: 100%; height: 100%; border: none;">
</iframe>
</body>
<script>
var name = "";
function changeName(arg) {
name = arg;
alert(arg);
}
</script>
</html>
Now, when I load the page or click the button of inside.html, the changeName function in outside.html is called, as alertbox is shown. However, variable name is not changed (I cheched from the console). I don't know why.
Both file are in the same domain, so there is no cross-domain problem.
You can view the live page if you don't mind:
outside.html on my server
Thank you!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Girl! Fly and eat the yogurt!</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/sketch.js"></script>
<script src="jquery-1.11.3.min"></script>
<link rel="stylesheet" href="css/particles.css">
<style type="text/css">
#frame {
position: relative;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id = "frame">
<canvas class=" sketch" height="385" width="1440"></canvas>
</div>
<script src="js/particles.js"></script>
<script>
var canvas = $("#frame").get(0);
canvas.id = "gameView";
</script>
<script src="js/app.js"></script>
</body>
</html>
Would you please tell me how to get the canvas inside the div using either jQuery or vanilla JS in this specific case? And how to set an id for the captured canvas element?
var canvas = document.querySelector('canvas');
Can anybody tell me how to use jQuery to make #mydiv stick to the full height of the window using jQuery when the user expnads the window. In this example, it only adjusts the height on page load. I need it to adjust whenever the user expands the window.
<html><head>
<script src="js/jquery.js"></script>
</head><body>
<style>
#mydiv {
background-color: blue;
height: 50px;
}
</style>
<div id="mydiv"></div>
</body></html>
<script>
if($("#mydiv").height() < $(window).height())
{
$("#mydiv").height($(window).height());
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
#mydiv {
background-color: blue;
height: 50px;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script src="js/jquery.js"></script>
<script>
$(window).on('load', function(){
$("#mydiv").height($(window).height());
$(window).on('resize', function(){
$("#mydiv").height($(window).height());
});
});
</script>
</body>
</html>
$(function(){
$("#mydiv").height($(window).height()); // for onload
//for resize
$(window).resize(function () {
$("#mydiv").height($(window).height());
});
});