Does anyone know how to load content into a div of external HTML page with jQuery?
Using $('#divname').html("content") only seems to be able to access div elements of the HTML page where the script is in.
If I understand correctly you want to change the content of a DIV of an external page like for example an iframe?
If so, this can't be done with simple jQuery due to security reasons
You can use load() to load all content , or target specific content from remote page into an element in local page. load() is an AJAX method. Do a little research on AJAX
$('#myDiv').load('remotePageUrl')
Or to only get part of the remote page
$('#myDiv').load('remotePageUrl #remotePageID')
API Reference: http://api.jquery.com/load/
Found it! This is what I needed:
access div in iframe parent
I thought I didn't matter that it was a child-parent relationship as long they were in the same domain, but apparently it does.
Thanks for the responses!
$.get("test.php", function(data){
$("div").html(data);
});
Related
When I load the page I get only a part of the code. The site is http://www.livescore.in
I want to create an html page that have a variable containing the full html code.
Thanks in advance
This might be what you're after. Using jQuery you can load a full page into your site. Create an empty div on your page and use:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#yourDivsID").load("yourURLHere");
});
</script>
You can't access the content of an external iframe (i.e an iframe which url belongs to a different domain).
So if your page is at example.com, and it contains an iframe loading livescore.in, the page will display the iframe and its content but the JavaScript code at example.com cannot read/write the content of the iframe.
There are solutions to this:
You can use postMessage to talk to the iframe but that means that the owner of livescore.in has agreed to communicate with you.
You make an ajax call to a server side script on your domain that will fetch the content for you and send it back to your JavaScript.
This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.
Is it possible to use Ajax / jQuery to load content on a local application (intranet)?
I'm thinking navigation div + changeable content div (multiple content html's).
Since I'm a beginner, this might seem like a stupid question but I appreciate all answers!
Regards
//Albin
it is possible to change content of div or any other element (that is the purpose of AJAX anyway).. you can try using jQuery
$('div').load('url');
the content of the URL is loaded into the div...
sure it is possible, because you just download jquery.js (script, whichs is framework). So you can make all needed changes.
Yes you can do this, the url can be a local relative or absolute one, it doesn't have to include a domain.
Here is my case: I use some external source to load html data to my page, after that I put content of this html to div. So, as soon as page loaded and ajax call finished, I see the results.
It works, Ok.. but now I came up, that this dynamically loaded content is not crawable by Google bot.. and this is something that I don't like :)
Are there any ways to say to google bot, that page page, actually contains a content of page?
For example, if I loaded a page from http://external.com/test.htm, and loaded it to div, can I use something like
<div id="dynamic"></div>
?
I hope you understand my question, if not, please make your comments!
Thanks!
You might be interested in checking out the following document directly from Google, for a few concrete tips:
Google Code: Making AJAX Applications Crawlable