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.
Related
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 am working on a project which i will like to collect the content of an hidden iframe and make it the html of a div each time the iframe changes state while loading so it will act like the page is redirected and downloading its contents, but the heading and footing of the page will not refresh as well.
A good example is how facebook keep their heading and footing fixed while redirected.
i have achieved collecting the iframe content to the div using onload, but the problem is that, the content will not fully download from the iframe before collected i.e images, .css files and .js files.
Here is a code i tried:
THE SCRIPT USED TO COLLECT THE CONTENT WHEN LOADED
<script type="text/javascript">
function frame_loaded(){
var content=$('#iframe_id').contents().find('#body');
$('#my_div').html(content);
}
</script>
AND THE FRAME
<iframe id="iframe_id" src="some_url.php" style="display: hidden;" onload="frame_loaded()"></iframe>
AND THE DIV
So i used setTimeout() to slow time for 1 second so the frame will load the content and execute it's scripts fully before collecting it.
Here is the code:
setTimeout(function(){
$('#my_div').html(content);
},1000);
At times the content still won't complete downloading it's content from the iframe before collected.
I don't have any idea how to listen to the iframe if it's fully loaded or listen to it's ready state.
If any one can tell me the best way to do this, it will be very appreciative because i am very new to this.
I would suggest using portholejs which will help you interact with the iframe(domain xyz.com) and you can pass messages in between the iframe(domain xyz.com ) and the page which holds it (domain abc.com).For example in your case when the iframe loads you can pass a boolean (from xyx.com )to your page(abc.com) which holds the iframe and then download the content there is working example of how it porthole works here.
Hope it helps.
kind of "stupid" but try this (i don't have your code so it's a bit "hard" for me
$(document).on('load','#iframe_id',function(){
var content = $(this).content().find('#body');
$('my_div').html(content);
})
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);
});
I would like to understand how the facebook comment plugin, that is inserted inside a web page, using a javascript script and a div tag, works.
If I try to guess (and using firebug), the javascript part loads an iframe that is inserted inside the div part.
My problem, is that everybody can put a comment feed that is not necessarily ralative to the web page content! Suggest I'm example.com, how can I be sure that example.org is not using my example.com facebook comments?
Does Disqus works similarily?
Thanks in advance.
The facebook url that is loaded within the IFRAME has access to the REFERRER URL (which is the loading page in this case) and uses it to check the domain.
I have a web page that I am hosting for a client. The page has the client's header and footer on it and our content (a flash app) placed in the middle.
The client now wants to provide us with an html page that contains their header, footer and some ads all in one document. They want us to include this document as an iframe and then dynamically place OUR content inside of that frame.
This seems very hacky to me but I thought I'd give it a shot. So what's the best way to take my markup and place it into the iframe?
Thanks!
Chris
Can't be done client side because of XSS security issues ... unless they are both on the same domain, but from your description, i doubt it.
Server side, you could dynamically read the target page, modify it any way you wish and then present it. If you really do need it in an iframe, you can dynamically load the modified source you got by something like this:
<html>
<head></head>
<body>
<iframe id="blah"></iframe>
<script>
var doc=document.getElementById("blah").contentDocument;
doc.open();
doc.write("content");
doc.close();
</script>
</body>
</html>
Just remember to also change any links, images, and so on with full URLs.
Can you supply them with some API they can use - so they can place something in their page to call your bits. As you are working with flash, you could avoid cross site scripting issues by including a policy file to give permission to their domain.