HALOO GURUT!
toimii & ei toimi...miksi???
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#iView1
{
border:1px solid black;
position:absolute;
width:49.25%;
height:100%;
left:0.25%;
}
#iView2
{
border:1px solid black;
position:absolute;
width:49.25%;
height:100%;
left:50%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
$(function()
{
/* tämä toimi IE:llä (8 & 10) sekä paikalliseti (esim. työpöydältä)
että palvelimelta kunhan matsku on samalla domainilla */
$('#iView1').focus(function(){
document.getElementById("iView1").style.border="3px solid red";
}).blur(function(){
document.getElementById("iView1").style.border="1px solid black";
});
$('#iView2').focus(function(){
document.getElementById("iView2").style.border="3px solid red";
}).blur(function(){
document.getElementById("iView2").style.border="1px solid black";
});
/* tämä toimi Firefoxilla (19.0.2), mutta vain paikalliseti (esim. työpöydältä)...miksi??? */
var iView1Doc = $('#iView1').contents().get();
$(iView1Doc).bind('focus', function(event) {
document.getElementById("iView1").style.border = "3px solid red";
}).bind('blur', function(event){
document.getElementById("iView1").style.border = "1px solid black";
});
var iView2Doc = $('#iView2').contents().get();
$(iView2Doc).bind('focus', function(event) {
document.getElementById("iView2").style.border = "3px solid red";
}).bind('blur', function(event){
document.getElementById("iView2").style.border = "1px solid black";
});
/* mikään näistä ei toimi mitenkään Google Chromella (25.0.1364.172 m)...miksi??? */
});
</script>
</head>
<body>
<iframe src="iframe1.html" id="iView1"></iframe>
<iframe src="iframe2.html" id="iView2"></iframe>
</body>
</html>No ainakin täytynee odottaa iframen sisällön latautumista ennen bindauksia..
Jos iframen valinta tapahtuu käyttäjän tekemänä, niin eikö homma toimisi about näin. Mahdollisesti tästäkin saa vielä yksinkertaisemman.
$(document).ready(function(){
$('#iView1').load( function(){
$(this).contents().bind('click', function(){
$('#iView1').css('border', '3px solid red');
$('#iView2').css('border', '1px solid black');
});
});
$('#iView2').load( function(){
$(this).contents().bind('click', function(){
$('#iView1').css('border', '1px solid black');
$('#iView2').css('border', '3px solid red');
});
});
$('html, body').click( function(){
$('#iView1, #iView2').css('border', '1px solid black');
});
});edit, kyselitkin paljon, että miksei noin toimi ja niihin en kyllä osaa vastata.. :)
noiden #iViewien ainakin pitäisi olla samassa luokassa niin säästyisi turhalta koodilta
Aihe on jo aika vanha, joten et voi enää vastata siihen.