CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Alberto Rossi
Alberto Rossi

Reputation: 1800

Change background of iframe scr path page

I have this HTML code in my website:

<iframe id="dado" src="other/maindome.html" width="100%" height="840px" frameBorder="0">
  Your browser doesn't load this iframe.
</iframe>

When I use the function apri() I correctly change the iframe src path.

function apri(dat) {
document.getElementById('dado').src= dat;
}

The page other/maindome.html (for example) has a background called bgframe2.png, and this page is showed inside the iframe. How can I change the maindome.html background with bgframe5.png? I must change maindome's opacity too.

<script>
$(document).ready(function(){
        $('iframe').contents().find('body').css('backgroundImage', 'url_of_img.png');
        $('iframe').contents().find('body').css('opacity', 0.8);
    });"
</script>

I've googled aroud, I read some online stuff and I wrote the code above. By the way ,since I don't know jQuery, how could I call this function when I press a button (if it's correct)?

Upvotes: 1

Views: 668

Answers (2)

Charaf JRA
Charaf JRA

Reputation: 8334

First this line is not correct :

    $('iframe').contents().find('body').css('backgroundImage', 'url_of_img.png');

It should be : 

    $('iframe').contents().find('body').css('background-image', 'url(url_of_img.png)');

Answer to your comment :

HTML Button:

 <input type='button' id='id_btn' />

JS code :

$(document).ready(function(){

 $('#id_btn').click(function(){

    $('iframe').contents().find('body').css('background-image', 'url(url_of_img.png)');
    $('iframe').contents().find('body').css('opacity', 0.8);

 });
});

Upvotes: 2

totymedli
totymedli

Reputation: 31106

jsFiddle demo

HTML

<button id="btn">Hi</button>
<iframe id="dado" src="google.com" width="100%" height="840px" frameBorder="0">
   Your browser doesn't load this iframe.
</iframe>

JavaScript

$('#btn').click(function(){
   $('iframe').contents().find('body').css('background-image', 'url(http://lorempixel.com/400/200/)');
});

Upvotes: 1

Related Questions