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");
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 try to scrape some info from site http://www.example.com that has the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="one">
<div>
<iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="hello">
<img src="http://example.net/dokuro_chan.jpg">
</div>
</body>
</html>
</iframe>
</div>
</div>
<div id="two">
<div>
<iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="hello">
<img src="http://example.net/dokuro_chan2.jpg">
</div>
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Then I try to scrape the iframe content via nodejs using jsdom:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
JSDOM.fromURL("http://www.example.com",{
resources: "usable",
runScripts: "dangerously"
}).then(dom =>{
const divIds=["#one","#two"]
divIds.forEach((divId)=> {
const selector=googleAdSelector(divId)
const iframe=dom.window.document.querySelector(selector)
console.log("Iframe Object", iframe)
})
// callback(null,dom)
})
const googleAdSelector=function(divId){
return divId+" > div > iframe";
}
What I want tyo try to acheive is to get the href and the src content that is inside the iframes.
But for some reason the output is:
Iframe Object null
Iframe Object null
Do you have any idea hot how access the html INSIDE the iframe?
You need to approach it differently. Just using a headless browser manually fetch the data through network during the page load and process it separately.
When having the following HTML page (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
</body>
</html>
and the following iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
the console output will look like:
However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.
Does anyone know why?
Edit:
Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)
The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder
Check if javascript is enabled in your browser
Edit:
or try to replace your index.html code with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
<script type="text/javascript">
function handleOnLoad(el) {
// el is the actual iframe
console.log("iframe loaded");
}
</script>
</head>
<body>
<iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
// console.log("iframe loaded");
});
});
</script>
</body>
</html>
Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
has to be inside iframe.html
So your pages look like below post modifications.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$(window).on("load", function(){
console.log("iframe loaded");
});
});
</script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
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.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myiframe')[0].document.execCommand('SaveAs',false,'somexml.xml');
});
</script>
</head>
<body>
<iframe id="myiframe" src="somexml.xml" frameborder="0"></iframe>
</body>
</html>
I know that execCommand only works in IE, but i cant get this to work. All I want is a "save as" dialog, with the iframe content beeing saved. So I want to run the function in the iframe, not on the "main" page.
Thanks
Try this:
var oIframe = $('#myiframe')[0];
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
oDoc.execCommand('SaveAs',false,'somexml.xml'); // this line will work only in IE
See this link for getting the document object of an iframe correctly: http://xkr.us/articles/dom/iframe-document/