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();
}
Related
On javascript how would you go about keeping a selected navbar?
I have been able to achieve this using sessionStorage but the issue is, if the user navigates the site directly on the url, then it wont register and the site thinks the user is still on another view. Is there any way to capture the place on the url the user is instead of capturing the navbar element he clicked?
You can use the window.location object, it provides good amount of information about the url that was loaded.
More info here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
Say I have two pages:
index.html and detail-product.html as the index page and a product detail page.
In the index page, I have a link to the product page:
<a target="_self" href="detail-product.html">Product Details</a>
If the user clicks the link, the browser would open a blank page as the product page loading.
I want to make this experience more smooth. Is it possible to do something that would allow the index page to hold and wait until the product page loads, then open it in a very fast speed.
For instance, I would do something like this:
$('a').click(function(){
var targetLink = $(this).attr('href');
var loadSuccessCallback = function(){
window.href = targetLink;
}
holdLoading(loadSuccessCallback);
})
function holadLoading(cb) {
// do the loading thing
// .....
// if the page is loaded, then call "cb".
}
Yes if the link is on the same server (not local file system) you can use fetch to get it's contents, store it into a variable, then set the HTML of the entire page to the contents of fetch. Only thing is the URL will be the same for both pages, so you can add a #otherPage at the end of the URL afterwards, and make a JavaScript function that automatically reads location.hash on page load for later
So fetch is
fetch("detail-product.html")
.then(r=>r.text())
.then(r=>{location.hash="details";document.getElementsByTagName("html")[0].innerHTML=r})
OR you can make a new Blob with the content of the text and open a new tab with the object URL of the blob
OR make a new iframe on the main page with the blob URL and set the location hash of the main window when button is pressed, and on page load read the hash, do the fetch according to the hash, and set the iframe src to the blob URL of the fetched text after load
Your question has already been answered so I'll write about an alternative...
I think you should make the browser preload the other page content after it has finished loading the current page, because more than smooth, the User Experience of what you want sounds like it could push users away after some time of wondering why the supposed link they clicked it's not taking them anywhere. It also has SEO issues.
Performance-wise the best way to do it would be with prerender:
<link rel="prerender" href="https://example.com/content/to/prerender">
https://developer.mozilla.org/en-US/docs/Glossary/prerender
https://caniuse.com/#feat=link-rel-prerender
...But if you care about browser compatibility you can use prefetch
<link rel="prefetch" href="https://www.example.com/solutions" />
https://developer.mozilla.org/en-US/docs/Glossary/Prefetch
https://caniuse.com/#feat=link-rel-prefetch
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 making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
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.