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.
Related
I want to change the content of the p tag after three seconds using setInterval() method. Then after three seconds I want to change the content inside of the p tag, with a new interval of 5 seconds. This is my code snippet:
background.js
var notify;
var word=function(){
$.get("http://localhost/chrome-notification/dosya.php", function (data) {
$('#container').html(data);
});
};
setInterval(word,3000);
setInterval(function(){
$.get("http://localhost/chrome-notification/", function (response) {
notify=$(response).getElementsByTagName('p')[0].innerHTML;
});
},5000);
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="background.js"></script>
<title>Vocabulary</title>
</head>
<body>
<p id="container">
</p>
</body>
</html>
This can be done in pure js.
var text = document.getElementById('container').innerHTML;
Is this what you need?
Since you are using jQuery, you can simply do $(response).find('p:eq(0)').html()
I've written some more examples here https://jsbin.com/modaxayaki/edit?html,js,console
If i understaned good, i would recommend adding CSS and linking it to html.
(If is that for what you need it for)
Make tag in css and customize it
Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source
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>
It's just a couple of lines of code: http://jsfiddle.net/z7bHt/
HTML:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
</body>
JAVASCRIPT:
$("#bowleft").mouseenter(function(){
console.log("worked!!!");alert("worked!!!");
});
but this simple mouseover isn't working, locally or remotely, in either chrome or firefox!
Could someone try this themselves to see if i'm going crazy or if it is my operating system? https://www.dropbox.com/s/ahpaluj2e7ru9xn/mouseover.zip
The .mouseenter code is running before the #bowleft element exists. You need to ensure that it runs after that element exists in the DOM. There are many ways to do this. I would suggest moving your JavaScript to right before </body>. You can also wrap it in:
$(function () {
Or $(document).ready(function () {, which is functionally the same.
I would also suggest using .on instead of the specific function named after the event, but this doesn't affect you here. All together:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").on("mouseenter", function () {
console.log("worked!!!");
});
</script>
</body>
You are trying to reference the image with your JS before it exists in the DOM.
The best thing to do is to move your JS to just before the closing body tag, like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").mouseenter(function(){
console.log("worked!!!");
alert("worked!!!");
});
</script>
</body>
</html>
If you want to keep it in the head of the document, you'll have to wrap it in a $(document).ready() callback.
try this it worked ........
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bowleft").mouseenter(function () {
console.log("worked!!!"); alert("worked!!!");
});
});
I am simply trying to create some simple vector graphics using the Javascript Library Raphael. There should be a square object and a curved object, but nothing is being displayed. Can anyone help me. Thank you.
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript"> //all your javascript goes here
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>
</head>
<body>
<div id="sample-2" style="width:500px; height:500px;">
</div>
</body>
</html>
Move your script to after the <div id="sample-2" style="width:500px; height:500px;"> tag
Or some people prefer to use the onload handler, using jQuery for simplicity
$(function(){
// Your code that runs after the DOM is loaded
});
The key is that your code is accessing the DOM and it needs to run after the DOM has been built. Calling it from the onload handler or after the DIV you're using makes sure the element is ready to be interacted with.
You are running your Javascript far too early. Your browser will run Javascript as it reads it and if the DOM elements have not been loaded, it will not do anything.
Try this:
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="sample-2" style="width:500px; height:500px;"></div>
<script type="text/javascript">
//all your javascript goes here
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({
fill: "green"
});
curvePath.attr({
fill: "blue"
});
</script>
</body>
</html>
Enjoy and good luck!
#JuanMendes it is slightly confusing, in the end the problem is that the js functions are called before the DOM is ready, elemets are still being created. I recommend using $(document).ready(function(){}) so that the scripts are executed only after the DOM has been created. I'm just explaining again because he is asking why he has to do that. For example if he did:
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //all your javascript goes here
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
}
)
</script>
</head>
<body>
<div id="sample-2" style="width:500px; height:500px;">
</div>
</body>
</html>
That script should work because the script is executed after the DOM is ready.
P.S. On a side note if you want to manipulate content that is dynamically created on the fly, you need to attach the event handlers as click, blur, hover, etc... with a binding operation so the event is registered. Example:
$('#form').on('blur', '#input', function(){
// code
})
you can check out the Docs for binding at:
http://api.jquery.com/on/
and of .ready() at:
http://api.jquery.com/ready/