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>
Related
I have following two pages and I am trying to send message from the main page to an iframe inside it. It is working correctly in IE 11 but not on Chrome. I don't see the pop-up or the console message in Chrome browser. The Chrome browser version is 60.0.3112.113.
HtmlPage1.html - http://localhost/Htmlpage1.html
<!DOCTYPE html>
<html id="root">
<head>
<meta charset="utf-8"/>
<title>Sheep</title>
</head>
<body id="b">
<iframe id="myFrame" src="http://localhost/HtmlPage2.html" height="200" width="300" seamless></iframe>
<script type="text/javascript">
"use strict";
window.addEventListener("DOMContentLoaded", function() {
var myFrame = window.document.getElementById("myFrame").contentWindow;
myFrame.postMessage("A cow", "*");
}, false);
</script>
</body>
</html>
HtmlPage2.html - http://localhost/Htmlpage2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drococile</title>
</head>
<body>
<h1>Fat Sheep :D</h1>
<script type="text/javascript">
window.addEventListener("message", function(event) {
alert(event.data);
console.log(event.data);
}, false);
</script>
</body>
</html>
Thanks
Easiest fix is to wait for the iframe to load
var myFrame = window.document.getElementById("myFrame");
myFrame.onload=function() {
myFrame.contentWindow.postMessage("A cow", "*");
};
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!
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.
Here is my HTML source:
<body>
<iframe id='iframe1' src="http://site1.com/myScript.html"></iframe>
<iframe id='iframe2' src="http://site2.com"></iframe>
</body>
How can I (in myScript.html page) change the src of iframe ?
(or navigate to site3.com)
myScript.html;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function navigateIFrame2() {
// code to change the url or navigate iframe2
}
</script>
</body>
</html>
$('#iframe2', window.parent.document).attr("src" "new url");
All I'm getting in my output is changeColor is not defined and changeAgain is not defined. I have tried to fix it but it doesn't seem to work. Any help would be appreciated, I have looked everywhere!!!
Here's my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.GetElementById("h3style").style.color = "red";
document.GetElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.GetElementById("h3style").style.color = "gray";
document.GetElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>
It should be getElementById.
Check docs here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.getElementById("h3style").style.color = "red";
document.getElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.getElementById("h3style").style.color = "gray";
document.getElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>