I'd like to change my iframe content but I don't understand how
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<iframe id="frame" width="100%" height="95%" src="http://google.com"></iframe>
<script type=text/javascript >
$('#frame').contents().find( "body" ).html('<p>hi</p>')
</script>
</body>
</html>
With this code I always have my google page and not a ifram with hi
<script type="text/javascript">
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>
While this is right, the content will never change as you are trying to modify the body of an external resource. You cannot do this due to cross-site scripting rules.
EDIT:
The only way to do it is to do what #user1153551 did and replace the whole document.
Check this Demo jsFiddle
you have to use load event within the iframe's document and calling out to a load function in the containing document to replace to a body contain.
jQuery
$('#frame').load(function() {
$('#frame').replaceWith('<p>hi</p>');
});
HTML
<iframe id="frame" width="100%" height="95%" src="http://w3schools.com"></iframe>
Use .replaceWith() jQuery Method.
use document.ready
<script type=text/javascript >
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>
Related
I am using .load() method for common header. But I want add dropdown in header for user profile.
Always, Script not working when I use .load() method for includin header.
Please don't suggest me to use PHP to include header file. I just want to resolve why jquery is not work when we use .load() method.
HTML File :-
<html>
<head>
<title>How to include HTML page with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$( "#header" ).load( "header.html" );
});
</script>
</head>
<body>
<div id='header'></div>
<div class='content'>Content</div>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<script src="../vendor/bootstrap-5.0.2-dist/js/bootstrap.min.js"></script>
<script src="../assets/js/script.js"></script>
</body>
</html>
Header Code :-
<div class="user-profile"><img class="user-pic rounded-circle" src="assets/img/user.jpg"></div>
Script :-
<script>
$(document).ready(function(){
$('.user-profile').click(function(){
alert('test')
});
});
</script>
You can try like this:
Set a name for the function
<script>
function f()
{
$('.user-profile').click(function(){
alert('test')
});
};
Then call the function on when load is finished like this:
$( "#header" ).load( "header.html", function() {
f();
});
I want to add css properties in a iframe div by using jQuery but it's not working.
Html Code:-
<html>
<body>
<iframe id='iframeId' src='api.php?abc=xyz..'>
<html>
<head></head>
<body>
<div class='change-class'> //require <div class='change-class' style='background-color:black'>
.......
</div>
</body>
</html>
</iframe>
</body>
</html>
JS Code:-
I try below code but doesn't get any result.
$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');
For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this:
$("#iframeId").contents().find(".change-class").css('background-color', 'black');
You can find use like this way:
var iframe = $('iframe');
$(".change-class", iframe.contents()).addClass('border');
I tried adding the SlimScroll to an iframe, but for some reason it isn't working.
<div id="-my-profile"><iframe id="scroll" height="525" width="912" src="/index/8"></iframe></div>
<script type="text/javascript">
$(function(){
$('#scroll').slimScroll();
});
</script>
I read the documentation about slimscroll and I found nothing about iframe.
What could be the problem? Is it working only with divs?
Thank you.
in "/index/8" page add:
<script type="text/javascript">
$(function(){
$('body or .container or #content').slimScroll();
});
</script>
add scrolling="no" to iframe:
<div id="-my-profile"><iframe scrolling="no" height="525" width="912" src="/index/8"></iframe></div>
Having problem to open form in new window, script is pulled from external service.
Take a look CODE on JSfiddle
regards
You can add a target attribute to the form after its been rendered;
<html>
<head>
<script type="text/javascript">
function fixform() {
//ism is created by the opentable.com script
document.forms["ism"].setAttribute("target", "_blank");
}
</script>
</head>
<body onload="fixform();">
<div id="book-table">
<div id="OT_searchWrapperAll">
<script type="text/JavaScript" src="http://www.opentable.com/ism/?rid=35449"></script>
<noscript id="OT_noscript">
Reserve Now on OpenTable.com
</noscript>
</div>
</div>
</body>
</html>
Update Try removing the onload="fixform();" and use the jQuery equivalent;
$(document).ready(function() {
document.forms["ism"].setAttribute("target", "_blank");
});
Ok, here is the situation. I have a site that I subscribe to that lets you add your own code, etc. They have a forum editor that I am unable to skin to match my site, so I'd like to just change the colors of the inner most frame (doc3 in the example below).
Here is the basic setup... yes, all documents are from within the same domain but I can only add code to the main document. The doc3 frame is created dynamically. The first frame has a class but no name, the second only has an id... I don't know if the bind works for the inner frame, but firebug isn't giving me any errors.
Oh, and I have tried injecting a stylesheet as well without success.
Main document (with my attempts at accessing doc3)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('iframe').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // This does change doc2 colors
$(this).contents().find('iframe#doc3').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // doesn't work :(
})
})
})
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc2.htm
<html>
<head>
</head>
<body>
<form id="form1">
Document #2
<iframe id="doc3" src="doc3.htm" width="100%" height="250">
</form>
</body>
</html>
doc3.htm
<html>
<head>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
I hope I made this clear enough. Any help or a point in the right direction would be greatly appreciated :)
Edit: updated the Main document with the suggestion from Wahnfrieden (thanks!), but sadly I still can't get to doc3.htm
Assuming your iframes are all on the same domain give this a shot:
$(function() {
$(window).load(function() {
var iframe2body = $('iframe').contents().find('body');
iframe2body.css({ 'background-color': '#333333', 'color': '#ddd' }); // doc2 colors
iframe2body.contents('iframe').contents().find('body').css({ 'background-color': '#fff', 'color': '#ddd' }); // doc3 colors
})
})
I didn't chain it ALL together purely for readability purposes and for IE I had to change it to $(window).load(function() {
$('#iframeID').contents().find('#someID').html();
Accessing to the document object using the iframe element can be pretty problematic. In most cases browsers let the embedded document to access the parent window's context but not vice versa. So in doc2.htm or whichever you want to control, assign your document object to parent windows variable.
main document:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
window.onIframeReady = function () {
setChildColor("#bbb");
}
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc3.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
parent.parent.setChildColor = function (color) {
document.bgColor(color);
}
$(function () {
parent.parent.onIframeReady();
})
</script>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
If the innerframe has a name try
innerframeName.document.body.style.backgroundColor="#000000";
I had the innerframe bgcolor set by
< style type="text/css">
body{background:#cccccc;}
< /style >
and was able to change it.