The following works well in Internet Explorer and Chrome, but NOT in Firefox.
The idea is to change the background of the parent body after every click within the iframe.
Note that Firefox somehow knows to set the blue background initially.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><script>
function polling() {
if (window.iframeId.change) document.body.style.background = 'red';
if (!window.iframeId.change) document.body.style.background = 'blue';
setTimeout(polling, 1000); }
</script></head>
<body onload="polling();">
<iframe id="iframeId" src="frame.html" style="width:100px; height:100px;"></iframe>
</body>
</html>
frame.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><script>var change=false;</script></head>
<body style="background:yellow;" onclick="change=!change;"></body>
</html>
This is how I could make it work:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function polling() {
if (window.frames['theIframe'].change) {
document.body.style.background = 'red';
}
else {
document.body.style.background = 'blue';
}
setTimeout(polling, 1000);
}
</script>
</head>
<body onload="polling();">
<iframe id="iframeId" src="frame.html" name="theIframe" style="width: 100px; height: 100px;"></iframe>
</body>
</html>
frame.html
<!DOCTYPE HTML >
<html>
<head>
<script>
var change = false;
function load() {
document.onclick = doClick;
}
function doClick() {
change = !change;
}
</script>
</head>
<body style="background: yellow;" onload="load()"></body>
</html>
Related
Below is my code... it works perfectly fine but...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;">
<button type="button" onclick="changetrafficlights()">Change Traffic Lights</button>
<script>
var position = 0;
var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight.jpeg"];
function changetrafficlights()
{position = position + 1;
if(position == list.length){
position = 0;
}
var image = document.getElementById('trafficlights');
image.src=list[position];}
</script>
</body>
</html>
I'm trying to make a javascript code in which will use a while loop or for loop in which will go through the variable "list" automatically
You can use setInterval() for that in the following way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;">
<button type="button" onclick="starttrafficlights()">Change Traffic Lights</button>
<button type="button" onclick="stoptrafficlights()">Stop Traffic Lights</button>
<script>
var position = 1, id;
var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight"];
function changetrafficlights(){
stop = true;
var image = document.getElementById('trafficlights');
image.src=list[position % list.length];
position++;
}
function starttrafficlights(){
id = setInterval(changetrafficlights, 1000);
}
function stoptrafficlights(){
clearInterval(id);
}
</script>
</body>
</html>
This will automatically change the img after the specified duration.
Hope it Helps!!
I'm trying to figure out WATIR.
Here is a situation. I want to monitor ads in few websites, but scraping them is not easy task because they are in iframe, then there is another iframe links which is generated with javascript. Only then comes the page which I would like to get.
Here is the code in main page:
<iframe width="300" height="250" scrolling="no" frameborder="0"
id="adbottomleft" src="/ad/left1" name="adbottomleft"></iframe>
Here is what the iframe says:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background-color: black;
margin:0;
padding:0;
}</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<div id="adfooter" style="width:300px;height:250px;"></div>
<script language="JavaScript" type="text/javascript">
function tl(){
var loaded = 0;
try {
loaded = parent.document['adver'];
} catch(e) { loaded = 0; }
if (loaded != 1) {
setTimeout(tl, 25);
} else {
var dest = document.getElementById('adfooter');
var lframe = document.createElement('iframe');
lframe.setAttribute('id','adbleft');
lframe.setAttribute('width','300');
lframe.setAttribute('height','250');
lframe.setAttribute('scrolling','no');
lframe.setAttribute('frameborder', '0');
lframe.setAttribute('src', 'http://ad.mangareader.net/btleft1');
dest.appendChild(lframe);
}
}
(function (){
tl();
}());
</script>
</body>
</html>
It does generate another iframe which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<!-- Rubicon Project Tag -->
<!-- Site: MangaReader Zone: ROS_BTF_LEFT Size: Medium Rectangle -->
<script language="JavaScript" type="text/javascript">
var cb = Math.random();
var d = document;
var iframe = "&fr=" + (window != top);
var ref = "";
try {
if (window != top) {
ref = "&rf="+escape(d.referrer);
}
} catch (ignore) { }
d.write("<iframe id='25504.15' name='25504.15' src='' framespacing='0' frameborder='no' scrolling='no' align='middle' width='300' height='250' marginheight='0' marginwidth='0'></iframe>");
d.getElementById('25504.15').src='http://optimized-by.rubiconproject.com/a/8240/13310/25504-15.html?cb='+cb+ref;
</script>
</body>
</html>
Only then comes the final page which I'm interested to scrape.
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css"> body {margin:0px; padding:0px;} </style>
<script type="text/javascript">
rubicon_cb = Math.random(); rubicon_rurl = document.referrer; if(top.location==document.location){rubicon_rurl = document.location;} rubicon_rurl = escape(rubicon_rurl);
window.rubicon_ad = "3260765" + "." + "js";
window.rubicon_creative = "3299047" + "." + "js";
</script>
</head>
<body>
<img src="http://assets.rubiconproject.com/campaigns/100/91/16/5/1325630095ap_300.jpg" border="0" alt="AnimePremium.net" /><script defer="defer" type="text/javascript">
{
if (Math.floor(Math.random()*100) < 1)
{
var url;
var iframe = (window != top);
url = "http://tap.rubiconproject.com/stats/iframes?pc=8240/13310&ptc=25504&upn="+iframe;
setTimeout(function(){ new Image().src = url }, 1000);
}
}
</script>
<script>var _comscore = _comscore || []; _comscore.push({ c1: "8", c2: "6135404", c3: "28", c4: "13310", c10: "3299047" }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })();</script><DIV STYLE="height:0px; width:0px; overflow:hidden"><IFRAME SRC="http://tap2-cdn.rubiconproject.com/partner/scripts/rubicon/emily.html?rtb_ext=1&pc=8240/13310&geo=eu" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" style="height:0px; width:0px"></IFRAME></DIV>
</body>
</html>
Impossible task?
here is what I'm doing.
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").html - Works!
If I want to get one more layer down I get error
irb
require "watir-webdriver"
browser = Watir::Browser.new :ff
browser.goto "mangareader.net"
browser.frame(:id, "adbottomleft").frame(:id, "adleft").html -> Don't work.
Element belongs to a different frame than the current one - switch to it's containing frame to use it.
What should I change in the 2nd code to make it read the next iframe?
I have been searching for days. Started with selenium then htmunit with c# then tried mechanize with python, but couldn't achieve wanted results.
I keep jumping. I finally thought that I will be able to achieve what I wanted with WATIR.
I need some help to get this done. Any tips?
The ID of the frame created by the script is "adbleft" not "adleft" that might be your problem
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").html
If the id of the final frame is not static, you might have to select it by index
browser.frame(:id => "adbottomleft").frame(:id => "adbleft").frame(:index => 0)
I want to update the timestamp on useronline database only when people aren't idle (keyboard mouse active for some time-I am using a jquery plugin for that) The problem for me is that I can't clear the interval for the function so in my test script below, when it starts counting it never stops and even when active again it starts another counter so that its like its counting twice as fast. How am I supposed to stop that timer? Its like the counter has never been started when its idle- so it can't find it to stop it.
In the real script the counter will be $.get()-ing the php that updates the mysql table. For that reason i'm using intervals, or it would get on every mouse move right? and that would be loading the server.
http://jsbin.com/uleza5 to test just don't move mouse for 6 seconds then see the idle text, then move the mouse and it will start counting; after 6 seconds it will go idle again when inactive.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script>
<script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">
$(document).ready(function(){
$('.status').html('active');
});
x = 0;
function count() {
x+=1;
$('.usercount').html(x);
}
(function() {
var timeout = 6000;
var it;
$(document).bind("idle.idleTimer", function() {
clearInterval(it);
$('.status').html('idle');
});
$(document).bind("active.idleTimer", function() {
var it = setInterval(count, 1000);
$('.status').html('active');
});
$.idleTimer(timeout);
})(jQuery);
</script>
</head>
<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script>
<script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">
var it;
$(document).ready(function(){
$('.status').html('active');
});
x = 0;
function count() {
x+=1;
$('.usercount').html(x);
}
(function() {
var timeout = 6000;
$(document).bind("idle.idleTimer", function() {
clearInterval(it);
$('.status').html('idle');
});
$(document).bind("active.idleTimer", function() {
it = setInterval(count, 1000);
$('.status').html('active');
});
$.idleTimer(timeout);
})(jQuery);
</script>
</head>
<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>
I'm trying to open a new window from another pop up java script window via writing html code in this pop up window, but it doesn't work, please help me as soon as possible.
<html>
<head>
<style>
.larger{ width:750px;}
.standard{ width:600px;}
.orginal{ width:10px;}
</style>
<script type="text/javascript">
function larger()
{
OpenWindow=window.open("", "larger","width=1000,scrollbars=yes");
OpenWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'+
'http://www.w3.org/TR/html4/strict.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.larger{ width:750px;}'+
'</style></head><body>');
OpenWindow.document.write('high');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "larger";
}
function standard()
{
OpenWindow=window.open("", "newwin",'width=600,scrollbars=yes');
OpenWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'+
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.standard{ width:600px;}'+
'</style></head><body>');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "standard";
}
</script>
</head>
<body>
<img class="orginal"id="img1" src="webfonts.jpg" border="0" />
<span onclick="larger()">fig1</span>
</body>
</html>
You have created the standard function in the first parent script and you are trying to call it from the child pop-up window, which would offcourse not find this function defined within it.
I am making my own WYSIWYG editor. But i can't make any text bold with the execcommand function. I am using the next code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function loadWysiwyg() {
if(window.navigator.appName == "Microsoft Internet Explorer") {
reactioneditor.document.designMode = "on";
} else {
document.getElementById('reactioneditor').contentDocument.designMode = "on";
}
}
function make_bold() {
document.getElementById("reactioneditor").contentWindow.document.execCommand("bold", false, null);
}
</script>
</head>
<body onload="loadWysiwyg();">
<iframe id="reactioneditor" style="border: 1px solid #CCC;width: 100%; height: 200px;"></iframe>
<button id="makebold" onclick="make_bold();">Maak bold</button>
</body>
</html>
I readed multiple tutorials but with no effect, i don't now how i can fix it.
Is there anyone who can?
Your exact code works for me in IE, Firefox, and Chrome. I wrote some text into the iFrame, selected it, and clicked the button. Are those the steps you are taking? Are you getting any errors?