how to check content of Iframe from external url - javascript

I wanna use Facebook's Like button on my web site.
It's so simple as everyone knows but I have a problem with the censorship in our country.
Facebook is censored in our country and if I use the simple iframe, the people who have no access to Facebook (can't pass the censorship) will see the block page which I don't want to.
So I wanna check if loaded address is Facebook show them the iframe else (they will be redirected to another web site) hide the iframe.
Is there any way for me to find this out? I mean anything like address or content or id etc.
Here is my code:
<html>
<head>
<title>facebook test</title>
<style>
.facebook{
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$.ajax({
url: 'https://graph.facebook.com/btaylor?callback=?',
dataType: 'json',
success: function(data) {
$(".faceboock").show();
// alert('success - facebook works');
// alert('data = ' + JSON.stringify(data));
},
error: function() {
alert('error - facebook fails');
}
});
</script>
<div class="faceboock">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmypage%2F152215541478267&width=292&colorscheme=light&show_faces=true&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
</div>
It works when client has access to facebook, I mean the "success: function" works but error function doesn't.
The problem is when facebook is not accessible that json never responds.
Is there any way to set a timeout for response or anything else in order to handle the error?

You can't check the content of an iframe that is not on the same domain as your code.
See Same Origin Policy
iframe.src can be checked without restrictions, but does not change when the redirect happens
iframe.contentWindow.location.href does change when the redirect happens, but can't be accessed in your case due to the security restrictions mentioned above
The only way I can think of to test this is:
Do a JSONP call to one of the Facebook APIs (JSONP has no domain restrictions)
Check the response
If these JSONP calls get redirected as well than it will most likely throw an exception instead of returning the expected values (due to the fact that it will try to parse as javascript a response which is most likely a fullhtml page)
Here is a working example using jQuery to do the JSONP call.
It works from my location, could you test it and see if you get the error alert?
You can also go in your browser to the url in the example. If facebook.com gets redirected, but this one doesn't than you'll have to find some other way to check it...

Related

Get a javascript derived dom-tree element

My aim is to get an element <div id="calender"> and all what is in the element shown in a browser. The point is that normal get-html-source won't do the thing. The element what I am looking for does not exists in the html output of php-function file_get_contents.
I have tried to get the source by php with xpath byt the help of http://us3.php.net/manual/en/class.domxpath.php which inludes a nice tool to get what is in any tag in the html page. But the problem here might be that the element (a calender) is formed to the loaded page by javascript and cannot be caught by server side php. So, is there a way I can catch such element (div) by javascript instead.
There are script examples of javascript for this kind of problem (if I have understood them correctly) but currently I cannot get a simple javascript to work. An example below shows how I have tried to built up a code. $ajax thing here is just one path I have tried to solve the problem but don't know how to use it. More here I cannot figure out why the simple javascript functions do not work (just test purposes).
<!doctype html>
<html lang="fi">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script type="text/javascript">
function ok {
alert "OK";
}
function get_html (my_html){
alert "OK";
var l = document.getElementById('my_link').value;
alert l;
alert my_html;
var url = my_html;
$.ajax({
url: url,
dataType: 'html'
success: function(data){
//do something with data, which is the page 1.html
var f = fs.open("testi_kalenteri.html", "w");
f.write(data);
f.close();
alert "data saved";
}
});
}
</script>
</head>
<body>
<p id ='my_link' onclick='get_html("lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192")'>html-link</p>
<p id ='ok' onclick='ok()'>show ok</p>
</body>
</html>
Briefly, I have a link to a web page, which shows up a (booking) calendar in it but this calendar is missing in the "normal" source code, by file_get_contents (php). If I browse the html source with Chromes tools (F12) I can find the calendar there. T want that information get by javascript or by php or such.
If you read the source code of the page you point to (http://www.yllaksenonkalot.fi/booking/varaukset_akas.php), you notice that the calendar is loaded via an iframe.
And that iframe points to that location :
http://www.nettimokki.com/bookingCalendar.php?id_cottage=3629&utm_source=widget&utm_medium=widget&utm_campaign=widget
Which is in fact the real source of the calendar...
EDIT following your comment on this answer
Considering the real link : http://www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192
If the calendar is not part of the generated html, it is surely asynchronously generated (in javascript, client side).
From this asumption, I inspected the source code (again).
In the developper tools of my browser, in the Network section, where you can monitor what files are loaded, I looked for
calls to server (everything but calls to resources : images, stylesheets...).
I then noticed calls to several urls with json file extensions like http://www.lomarengas.fi/api-ib/search/availability_data.json?serviceNumber=9192&currentMonthFirstDate=&duration=7.
I felt I was on the right track (asynchronous javscript calls to generate html with json datas), I looked for javascript code or files that was not the usual libraries files (jquery, bootstrap and such).
I stumbled upon that file : http://www.lomarengas.fi/resources_responsive/js/destination.js.
It contains the code that generates asynchronously the calendar.
tl;dr
The calendar is indeed generated asynchronously.
You can't get the full html with a curl or file_get_content in PHP and
you can't access it with ajax code (due to Same-origin policy).
By the way, you should contact the site to see if you can access their api via PHP with their consent.
Hope it helped you understand the whole thing...
To get <div id="calender"> you can use next code (jquery):
<div id="calender"></div>
<script>
$("#calendar").click(function(){
alert('calendar was clicked');
});
</script>
If I understand you correctly. I think you need appropriate php respond with some correct code inside php file:
// json_handler.php
<?php
if (is_ajax()) {
$return = $_POST;
$return["ok"]="ok";
$return["json"] = json_encode($return);
echo json_encode($return);
}
function is_ajax()
{
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
and this is script wich is inside html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<a id="click">click</a>
<script>
$("document").ready(function(){
$("#click").click(function(){
var data = {
"request": "request"
};
data=$.param(data);
// alert(data);
$.ajax({
type: "POST",
dataType: "json",
url: "json_handler.php",
data: data,
success: function(data) {
// here you will see echo respond from your php json_handler.php
// also you can add here more javascript (jquery code) to change your page after respond
alert();
}
});
return false;
});
});
</script>
<body>
<html>
http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Refreshing an iframe which are in different domains

I have a page called main.jsp which is in domain domain1 and it has a iframe which loads contents from domain2. Basically main.jsp is a common contents and in iframe we load contents from other web applications deployed on different servers.
My problem is I want to refresh the content inside iframe automatically (say 5 seconds). I tried this code first:
<meta http-equiv="refresh" content="5;url=<s:url includeParams="all" />" />
Err: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame
I tried this code:
<script type="text/javascript">
window.setTimeout(function(){ window.location.reload() }, 15000);
</script>
Which also gives me same error. Can anyone guide me how to achieve this?
Note:
I have added this code to get rid of cross-domain issue:
<script type="text/javascript">
document.domain = window.location.hostname.replace('www.', '');
</script>
Try adding it dynamicaly
function addRefresh(){
var meta = document.createElement('meta');
meta.setAttribute("http-equiv", "refresh");
meta.setAttribute("content", "5");
document.getElementsByTagName('head')[0].appendChild(meta);
}
if(location.origin === 'domain1.com'){
addRefresh();
}

java script and same origin policy confusion

I am trying to understand the same origin policy of browsers. Theoretically things seem ok. So i am now trying to practically understand it using a small demo.
I have 2 domains hosted on wamp, viz domain1.com and domain2.com
domain1.com consists of index.php, innocent.php and 2 js files in a javascript folder, namely dom1_javascript.js and dom1_normal.js
here are the details of the above files: -
index.php
<?php
$value = "domain 1 cookie";
// send a simple cookie
setcookie("Dom1Cookie",$value);
?>
<html>
<script type="text/javascript" src="../javascript/dom1_javascript.js">
</script>
<body>
this is from doamin 1
</body>
</html>
innocent.php
<?php
$userSecret=$_GET['userCreds'];
if($userSecret)
{
echo "the user's secret is "+$userSecret;
}
else
{
echo "sorry user secret not found";
}
?>
dom1_javascript.js
alert(document.cookie);
dom1_normal.js
alert("alert domain 1");
alert(document.cookie);
//referring the div
var bdy=null;
// creating the form
var secretForm=document.createElement("form");
secretForm.id="goodForm";
secretForm.method="get";
var myQryStr="http://domain1.com/innocent.php?userCreds=abcd";
alert(myQryStr);
secretForm.action=myQryStr;
//creating the text box in the form
var hiddenBox=document.createElement("input");
hiddenBox.type="text";
hiddenBox.name="secBox";
hiddenBox.value="abhinav";
//appending the box to the form
secretForm.appendChild(hiddenBox);
//appending the form to the div
bdy=document.getElementById("mydiv");
alert(bdy);
bdy.appendChild(secretForm);
//submitting the form
document.getElementById("goodForm").submit();
domain2.com consists of 2 versions of index.php, viz, index.php and index1.php
here are the details of the above php file: -
index.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_javascript.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
index1.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_normal.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
I am using firefox as the browser to test these scritps.
First I goto domain1.com in the browser. This sets the domain1 cookie. Then I goto domain2.com/index.php
As expected, the script on domain2/index.php sets the domain2 cookie. Then the javascript from domain1 gets loaded which says
alert(document.cookie)
The execution of this script alerts the domain2 cookie value.
Assumption1: -
So my understanding here is that due to the same origin policy of the browser, even though the script was called from domain1, it did not alert the domain1 cookie, but instead alerted the domain2 cookie.
Please let me know if I am correct in the above assumption ?
Now I clear the browser cache and remove all the cookies from the browser. Run domain1.com again, which again sets domain1 cookie. And then, this time I goto domain2.com/index1.php which sets the cookie for domain2 and then accesses the script present in
domain1.com/javascript/dom1_normal.js
Now if my assumption1 was correct,( i.e. a javascript from domain1.com when imported in domain2.com will get executed with reference to domain2 only, and not its incoming domain, as per the same origin policy) then in this case also it should be the same with dom1_normal.js. So the javascript in dom1_normal.js should have access to all the HTML elements in domain2/index1.php It does not really so happen as confirmed by
bdy=document.getElementById("mydiv");
alert(bdy);
in domain1.com/javascript/dom1_normal.js which alerts null
please let me know where am i going wrong. And i have gone through more than a dozen discussions (on stack overflow and elsewhere including MDN, wiki, google etc.) and articles about same origin policy, but none of it has made the idea clear to me.
The Same-Origin policy doesn't have much to do with loading JavaScript. Regardless of where a script comes from, its actions take place under the aegis domain of the main page. Thus, if your main page comes from "domain1", then all scripts execute in the context of "domain1", whether they came from that domain or any other domain.
Note that it's not possible to access the source code of a script that loads from some other domain.
The reason your "dom1_normal" script reports "null" for that element reference is probably because you're importing the script before the <body>. The DOM is built incrementally, but scripts run synchronously when they're loaded, so if you call getElementById() for some element that's after the <script> tag, it won't be there.

Get raw content of Iframe

I want to use Jquery or javascript to get the raw content (mean everycharacter) of an Iframe. It sounds simple but I'm still struggling with finding the right way for it.
For now it is only a XML content in the Iframe though.
Here the code:
$(function() {
var xmlContent = $("#CFrame").contents().find("*").text();
// The magic
$('#SResult').xslt({xml: xmlContent, xslUrl: 'stylesheet/designSS.xsl'});
});
The html page
<form id="searchForm" method="GET" target="ContentFrame" action="http://125.235.8.210:380/search" onSubmit="processContent()">
.....
</form>
</div>
<div id="SResult">
</div>
<iframe id="CFrame" name="ContentFrame" frameborder="1" height="2000px" width="1000px" scrolling="no" src="stylesheet/test.xml"></iframe>
</body>
Thanks,
Disclaimer: I'll answer your question regardless of whether it is actually an elegant solution to your problem. Joseph seems to take that as the question. I would say he is probably right to do so.
It won't work trying to get the frame using mimetype text/xml. The browser will proceed and 'translate' the XML into HTML. That's why it doesn't sound so simple. This way it is actually impossible.
I present you with a simple work-around for this problem.
<html>
<head>
<script>
function getXmlContents() {
/*
Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.
http://www.w3schools.com/jsref/prop_frame_contentdocument.asp
*/
var iframeDocument = document.getElementById('greetingFrame').contentDocument;
if (iframeDocument == null)
return undefined;
var xmlContainer = iframeDocument.getElementById('xmlContainer');
if (xmlContainer == null)
return undefined;
return xmlContainer.innerText == null ? xmlContainer.textContent : xmlContainer.innerText;
};
</script>
</head>
<body>
<iframe id="greetingFrame" src="helloworld.html" onload="alert(getXmlContents())">
</iframe>
</body>
</html>
The contents of the XML are wrapped inside an HTML (helloworld.html):
<html>
<body>
<script id="xmlContainer" type="text/xml">
<?xml version="1.0" encoding="UTF-8"?>
<title>
Hello world
</title>
</script>
</body>
</html>
I've successfully tested this in Chrome, Firefox and IE.
Of course you would have to wrap your XML documents inside a HTML script tag as indicated above. The XML can also be wrapped in a different tag, if you'd like it rendered for example, but you'd have to encode the XML using html encoding. This needs to be done on the server-side. A very simple (php/ruby/python/etc) script would suffice.
If your XML resides on your domain, you are better off with AJAX, especially using the jQuery library, which parses it for you and make it ready for immediate manipulations.
If it does not live on your domain, then you can't access it via AJAX unless the remote server and your client's browser both support CORS.
You have options though:
If the remote server's API supports JSONP, use it instead of XML. Then you can use jQuery to retrieve JSONP data or roll your own script loader.
Or use your server to proxy the XML for you. Servers are not restricted to the Same Origin Policy. Create an API on your server that relays your form data to the remote server and retrieve the remote page - all as if your server was the browser. Then forward the results back to you.

Get JSON data and put it into HTML tag

I'm trying to solve a issue regarding to JSON data (getting and post it). Bellow I posted my code which doesn't work and I don't know why? I checked with Firebug and says that it's ok: 200 OK sourceforge.net 1.4 KB 216.34.181.60:80
What I'm trying to do, is to get some stats from a sourceforge project and put it into a div tag.
The link is a valid json (http://sourceforge.net/projects/rdss/files/stats/json?start_date=2010-12-01&end_date=2012-11-24).
<html>
<head>...</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$.getJSON("http://sourceforge.net/projects/rdss/files/stats/json?start_date=2010-12-01&end_date=2012-11-24", function(data) {
$.each(data.posts, function(i,data) {
var div_data = "<div>"+data.oses+"</div>";
$(div_data).appendTo("#testjson");
});
});
return false;
});
});
</script>
<div id="testjson"></div>
</body>
</html>
This is a cross domain issue. Check the console. You need write a proxy at the server side to get around. Based on your server side language, you can Google a proxy snippet.
You are trying to do a cross-browser request: http://en.wikipedia.org/wiki/Same-origin_policy.
So, getJSON is failing and trowing exception.. see "No 'Access-Control-Allow-Origin' header is present on the requested resource"
When this happens you can workaround using CORS.
But for this workaround work, you need server be CORS-enabled, what unfortunately sourceforge isn't.
You can see this by checking response header. It has the key Access-Control-Allow-Origin:*.
Usually, you can do this by accessing Developer Tools in Browsers:
- Select Network tab.
- Identify JSON page and select.
- Open Header tab
- Go to Response Headers section.
See an example:

Categories