Im looking for a way to link to a webpage within a facebook iframe page
so
http://www.facebook.com/designmystyle/app_244351832329915
would be something like
http://www.facebook.com/designmystyle/app_244351832329915?http://www.lickmystyle.com/contact/
I have tried the method here http://www.codingforums.com/archive/index.php/t-85547.html using
<script type="text/javascript">
<!--
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["app_runner4f84331f0576e6f73380702"].location=url
}
}
onload=loadI
frame
//-->
Im unsure if app_runner4f84331f0576e6f73380702 is the name or the id of the iframe but it was the only one I could find that had a width of 810px by 800px
Any ideas on if this could be done would be great
If it's a facebook canvas app then the url for it should be of apps.facebook.com and not www.facebook.com.
Any querystring parameter that will be added to your canvas app url will be then passed by facebook to your app by adding it to the url of your app when loaded inside the canvas iframe, so if you direct the user to:
apps.facebook.com/app-name?param=value
facebook will POST the app canvas iframe to:
www.yourdomain.com/canvas-path?param=value
Then you can get that parameter like any other GET parameter and what you want with it.
One thing though, if that parameter is a url then it should be url encoded, other wise things will go wrong.
What I don't understand is what you're trying to do with the url that you want to pass as a parameter, what is this "app_runner4f84331f0576e6f73380702"?
Edit
Oh, it's a page tab, sorry, I missed that part.
I'v never used it before, but it says in the last section (Integrating with Facebook APIs) of the Page Tab Tutorial:
your app will also receive a string parameter called app_data as part
of signed_request if an app_data parameter was set in the original
query string in the URL your tab is loaded on. For the Shop Now link
above, that could look like this:
"http://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here".
You can use that to customize the content you render if you control
the generation of the link.
From what I understand, this is exactly what you need in order to get the data.
How ever, you won't be able to change the url of the iframe the way you posted since you have no access to the parent window (your page is on different domain than of facebook, and the browser will prevent it due to the cross-domain policy).
What you can do how ever is just:
document.location.href = URL;
You are in your own page, doesn't matter that it resides in an iframe.
The thing is that you don't need all of that, just be aware in the server side of the parameter that is passed to you from facebook (from the query string) if such exists, and render the page according to that.
There's no reason to render a page that then redirects the page to another url, when you already know what the user wants, you're just making the user make a redundant round trip to your server for nothing.
Related
I'm working on a Webflow site. On the home page we have a lightbox with a video. The user must click a button to view the lightbox. We would like the URL to change when the lightbox is visible to make the video in the lightbox more shareable.
How can I make a URL for a lightbox?
Assuming Webflow has decent JavaScript capabilities, this is one strategy:
The method that actually changes what's in the browser URL box and history without reloading the page is history.pushState. Linked is the MDN documentation explaining how to use it.
To get the URL for the page, you can use window.location
The part of the URL you will likely be changing is the URL query parameters. If it's just one time, you can probably just do this manually, e.g. add /?lightbox=true to the end of the base URL. JS has a handy interface called URLSearchParams() that you can use to define those parameters and print them into a string.
When the page loads, you'll need a function the check whether the URL includes the parameter for the lightbox, and what its value is. You can do that with URlSearchParams(). Example:
var urlS=new URLSearchParams(window.location.search); //this gets whatever is in the url parameters when the page loads
var lightbox=urlS.get('lightbox'); //this gets the lightbox parameter
if(lightbox==true){
lightboxActivate();
}
I have added a setting that my project URL will never be loaded in an iframe by adding a header
response.setHeader("X-Frame-Options", "deny");
this is working fine but on the Iframe page , i just see a broken image saying refuse to connect with URL. Is it possible if i want to show some specific message with this kind of request or the URL will automatically open in a separate tab rather then the Iframe as we don't wan't customer to view this look and feel.
http://sequoiapacificmortgage.com/loan-application/
I have embedded the clients' loan application form (on another website) into an iFrame so the user stays on the site. The loan application (upon submit) redirects to the client's Home Page, but unfortunately, it stays within the frame rather than going to the main Home Page window. I had inquired here about how to remedy this, and was told that the Target attribute target="_top" would do the trick.
The loan application processor people have no way to add the Target attribute to the redirect URL, and they have suggested the following:
"The thank you page after the application and before the redirect URL has a unique URL.
Is it possible to code your iframe to recognize this URL and redirect the full site to your home page rather than depending on the vLender redirect within the iframe?
I am including the unique thank you page URL from Lori's website below, the ref_ID attribute is the unique application ID number assigned to my test application (the application ID's are generated using the first 3 letters of the applicant's first name [LYN for Lynsee] and the first 3 letters of the applicant's last name [TES for Testing] followed by the numeric sequence) but you should be able to remove that and have your custom site's code recognize the .php url which would trigger a redirect within your site's code that would take place before our system enacts its redirect to the home page within the iframe.
(https://www.vlender.com/apps/templates/new_thank_you.php?ref_id=LYNTES998262971)"
Is it even possible to do this? Thanks for your advice!
regards, Ned
EDIT:
You could handle the navigation of the iframe, and see what url it goes to.
use onload to see when the iframe navigated to a new page, and contentWindow.location.href to get the url from the iframe.
something like:
function checkURL() {
if(document.getElementById('iframeID').contentWindow.location.href == "UNIQUE_URL") // if the location of the iframe is the unique url
window.location = "redirect.html"; //redirect this page somewhere else.
});
<iframe id="iframeID" onload="checkURL();" ... //onload fires when a page loads in the iframe
on load: http://w3schools.com/jsref/event_frame_onload.asp
get iframe URL:
Get current URL from IFRAME
I am quite new to javascript and web programming in general. But basically, I have made a facebook canvas applicaiton and I was wondering how I can redirect to a page and make it stay within the iframe using javascript. For example: Right now i have something like
<script type="text/javascript">
window.parent.location = "http://www.google.com";
</script>
but this redirects to the google page not inside the canvas application... Any ideas?
Thank you!
In facebook the redirect option is disabled.So you cannot redirect to any uri unless it is clicked by user.
The redirect is an automatic and by clicking is manual.
11. The primary purpose of your Canvas or Page Tab app on Facebook must not be to simply redirect users out of the Facebook experience and onto an external site.
2.You must not pre-fill any of the fields associated with the following products, unless the user manually generated the content earlier in the workflow: Stream stories (user_message parameter for Facebook.streamPublish and FB.Connect.streamPublish, and message parameter for stream.publish), Photos (caption), Videos (description), Notes (title and content), Links (comment), and Jabber/XMPP.
https://developers.facebook.com/policy/
I am building an application where I want to load a page from another server into my page. The particular page that I'm pulling data from depends on a query that is being run (with OAuth access) on that foreign server. Once I get the URL for that page, I am loading it in an iFrame and displaying it on my page.
The problem is, the URL that the query gives me is actually to a page that forwards three times before getting to where I actually want to go. To make things more complicated, it also has frame-buster code on the initial page. I set my page to redirect to a page that returns a 204 status on page unload so as to beat the frame-buster, but now it's just stuck displaying the initial blank page instead of the content I want, which is at the end of three redirects.
My initial idea was to try to capture the code for the outgoing location request on page unload. I had hoped to be able to see where the user is being redirected to and load that request inside the iFrame instead. Repeat three times to get the correct page in the iFrame. Intuitively, however, this felt like it shouldn't be able to work, and of course it does not because letting pages see where their users are going to upon leaving a site would be a major privacy issue.
Next, I was thinking that maybe I could just parse each new page in turn as it was loaded into the iFrame to find the script for the redirect. I'm pretty sure it's done on the server side, however, since looking at the code I was getting didn't turn anything up.
I started looking for ways to maintain that redirection inside the iFrame. That is, allow the redirect to occur, but force it to stay inside the iFrame while also preventing the frame-buster code from doing anything. This would be the easiest solution, but I can't find a good way to do it. Right now, I just have a blank page loading inside an iFrame, and I think there's something on the server side that performs the redirect that isn't running in the iFrame. The frame buster code only prevents the entire document from changing, not the iFrame. Is there a good way to do this or am I going about things the wrong way?
To prevent the frame buster, from here:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
load the first page via curl locally, strip the busting code, make all links absolute and display that in the iframe.
it should redirect as espected and do your merry thing.
Good luck making all the urls in the document absolute. Dont forget javascript urls and functions you might need to override by pasting in your owncode after the script tags.