I've got an iframe application that's working fine and rendering fbml in facebook. But the whole app is built using ajax calls to load large chunks of pages. Several of these have < fb: tags that aren't being rendered when they load. I tried the code below, which is then loaded into a div in my index page, but it doesn't show anything at all, no html, no fb rendering, nothing. Can someone please tell me what I'm missing?? Thanks so much!!
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:serverfbml style="width: 600px;">
<script type="text/fbml">
<fb:fbml>
<!-- all of my html and my php and my fb tags go in here, for example: -->
<fb:name uid="my_real_user_id" useyou=\"false\"></fb:name>
</fb:fbml>
</script>
</fb:serverfbml>
I hope my question was clear. If not, just let me know I'll explain in more detail! :P
have look at this question
Loading Facebook fb:profile-pic via AJAX in Facebook Connect site
Related
quick cry for help: this website "broke" somehow and is stuck in the pre-loader
https://thelosertakesitall.com/ – I want to understand why and how to fix it, thank you!
I tried removing the elements displaying the loader but then it just stays at a blank screen. I understand the code is old and was set up by someone I do not have contact to anymore.
jQuery is not loaded because of:
Mixed Content: The page at 'https://thelosertakesitall.com/' was
loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
try to change
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
to
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
I have a html structure like this
<html>
<body>
<iframe srcdoc="HTMLDOC"></iframe>
<body>
</html>
where HTMLDOC is a HTML doc which has some <img> tags that show images in my server that the user must be authenticated to see.
This works flawlessly on Chrome, but when trying on Firefox the requests made from the browser to fetch these images do not send the user's cookies, and thus the images are not downloaded, (since the server thinks that the user is not authenticated).
If I convert the iframe to a "classic" iframe, like this:
<iframe src="URL INSIDE MY SERVER"></iframe>
where URL INSIDE MY SERVER is an endpoint that serves the same HTMLDOC it works both in Chrome and Firefox, sending the appropriate cookies in the requests to fetch the images.
I've tried as well to add the parameter sandbox="allow-same-origin allow-top-navigation allow-scripts" to the iframe using srcdoc, to no avail.
What's weird is that if this is a same-origin situation I can't think a clearer same-origin that having the page in the HTML itself, so I don't know if I'm missing something.
I'm not sure whether the implement differences between Chrome and Firefox are, but I use some DOM manipulations to bypass this issue:
<html>
<body>
<iframe onload="fillIframe(this);"></iframe>
</body>
</html>
<script type="text/javascript">
function fillIframe(o) {
o.contentWindow.document.body.innerHTML = "HTMLDOC";
}
</script>
Sample Javascript code to replace iFrame embedded web application with AJAX (NO jQuery please)
Hi, I have a simple 'parent' html page with a 'child' iframe that loads another external web application from a different domain.
Here is the parent html page: https://shared-testing.s3-us-west-1.amazonaws.com/Example-iFrame-Web-App.html
The Problem: This simple page works fine on desktop browsers like chrome/Safari. But When I open the same link on my iphone safari/chrome, the web-app shows login screen. So basically what worked in desktop browser is not working in mobile Safari/Chrome.
(I don't understand iframes more than the simple syntax, but it seems there is some issue with how 3rd party cookies are handled in the mobile browsers... but how come it works on desktop browser and not on mobile browsers???... I am pretty confused about this point and I may be wrong about this thesis.)
From what I learned so far, iframes are less desirable (as per some experts, and I am not), I am inclining towards replacing the iFrame with a simple that our AJAX code will replace with the external web-app and show the application as before in my parent html page.
I am sure this is not the first time this has come up but after searching a lot, I was not able to find some example code that will help me do this without jQuery. I want to use plain Javascript for this and avoid jQuery.
So if you can help with either one of the following, I'd greatly appreciate it:
Why is the current html parent behaving differently in desktop
browsers versus the mobile browsers? Any ideas to make it work
consistently in all size browsers?
Sample code to replace the iframe with pure javascript AJAX approach to load the web-application.
Thanks a lot.
Copying the simple html parent file below:
<html>
<head>
<title>Sample Web-App Embedded in iFrame </title>
<style>
.example-container{
background-color:#bffdf6;
width: 100%;
padding: 30px;
}
.example-iframe{
margin: 0 auto;
display: block;
}
</style>
</head>
<body >
<div class="example-container">
<h3> This a test web page for embedding an interactive flowchart using iframe.</h3>
<iframe class="example-iframe" height="600px" width="550px" src="https://www.decizone.com/47/qZPlK2ezwIK8x3bO/How-to-Measure-Shipment-Delivery-Success-KPI/Ship-Delvry-KPI/id/5AKwBABWqJgLs1IUfqrEh1ARDstiBMcy ">
<p>Your browser does not support iframes.</p>
</iframe>
<p> <strong>NOTE:</strong>: Try opening this page on desktop as well as mobile browsers to test.</p>
</div>
</body>
</html>
I've made page with sidebar, which can be hidden. I added JQ mobile becouse I need swipe event for handling it on mobile devices, but JQ mobile broke the page completely.
All forms are submitted by AJAX (I found event for forms and links in G Chrome- developers) and all links also tries to load content by AJAX.
Is there any way how to disable it for whole page (some global config, not just with data-ajax=”false” which doesn't work for me at all)?
Could anyone help me fixing that? Thank you :)
After few hours browsing documentation, I've found, what I needed. I just needed to move config code before JQ Mobile script loading.
Now it works;
<script src="files/script/lib/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.extend($.mobile, {autoInitializePage: false});
});
</script>
<script src="files/script/lib/jquery-mobile.min.js"></script>
I´m loading one off my pinterest boards in a page loaded with ajax, and the first time I load the page it works and displays my board as it should.
But when I load the page again then it does´t work?
I have tried to set setTimeOut and some other things but I can´t get it to load the board the second time I load the page.
This is the test code I have now:
<a data-pin-do="embedBoard" href="http://www.pinterest.com/pinterest/pin-pets/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
Solved
Instead off linking to pinit.js in the code I changed it to pinit_main.js and it starts to work.