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!
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 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
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
I take a video photo from youtube by iframe.
You can see it when you click on HTML button so the photo is load up but I also try to make the photo to change to a video in the iframe after I click on the picture. Thanks to all..!
This is the HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<header></header>
<nav>
<a target="page" id="img" onclick="html()" href="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg">
<button>HTML</button>
</a>
</nav>
<iframe name="page" src="" frameborder="1"></iframe>
<footer></footer>
</body>
</html>
This is The JAVASCRIPT:
function html(){
var iframes = document.getElementById('iframes');
iframes.innerHTML ='https://www.youtube.com/embed/bWPMSSsVdPk';
}
Is this something like what you are looking for?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
<style>
.hidden {
display: None;
}
.shown {
display: "";
}
</style>
<script>
function html(img) {
var iframe = document.getElementById("frame");
img.setAttribute("class", "hidden");
iframe.setAttribute("class", "shown");
}
</script>
</head>
<body>
<header></header>
<nav>
<button>HTML</button>
</nav>
<img src="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg" frameborder="1" class="shown" id="image" onClick="html(this);"/>
<iframe id="frame" name="page" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="1" class="hidden"></iframe>
<footer></footer>
</body>
</html>
You might want to fiddle with the height and width attributes of your elements, but this is how I would achieve the result you're looking for.