Menu
Here is my situation.
I have a file called iframe.html. which has code in below,
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8"/>
<title>Pluign Development</title>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
</head>
<body>
<iframe id="abc" src="test.html"></iframe>
<div id="sub">click</div>
</body>
<script src="js/script-22.js" type="text/javascript"></script>
</html>
and i have test.html file. which has code in below,
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8"/>
<title>Pluign Development</title>
</head>
<body>
<div id="red">prasanga karunanayake </div>
</body>
</html>
here is js code what i have tried,
(function($){
var fire = {
init:function(){
$('#sub')
.on('click', function(){
$('#red', parent.document).css('display','none');
});
}
};
fire.init();
}(jQuery));
Here is my situation.
i need to hide <div id="red">prasanga karunanayake </div> which is in the test.html file. if i click <div id="sub">click</div> then hide html content which is in the test.html.
I am pretty much confused,Your help is appreciated.
289
Click on the Hide Div button to hide the <div> element inside the above iframe.
Can I hide content inside an iframe from an external domain? Yes totally doable. Once you assign the parameter to a var, you could then do anything you want… like a hide() on an element.
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src .
Every iframe on a page will increase the memory used as well as other computing resources like your bandwidth. So, you should not use iframe excessively without monitoring what's going on, or you might end up harming your page performance.
You can use .contents() this way:
$('#abc').contents().find('#red').hide();
Another thing is, As you have wrapped your code in a closure which runs as page response gets in the browser. So it might be possible that this code change would not work.
Instead i suggest you to put a dom ready block also for this:
(function($){
$(function(){ // <---add this block from here to
var fire = {
init:function(){
$('#sub').on('click', function(){
$('#abc').contents().find('#red').hide();
});
}
};
fire.init();
}); //<----here
}(jQuery));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
