I'v paid attention to google's
https://mail.google.com/mail/?shva=1#inbox
Particularly to #inbox
This URL can be bookmarked, how this can be achieved?
Because it is being processed by Javascript via Ajax calls, that take in consideration what is inside the query string.
An example for locating in Javascript all # tags is:
urlquery=location.href.split("#");
So when first loading a page that contains that kind of links, the links on the page are generated containing # anchors that, when clicked, change the location address, but doesn't cause the page to reload, as it is an anchor to the current page. Then javascript hooks to the click event do the real job of loading the real content via Ajax.
But, since the address has changed on the location bar, you can store it on a bookmark. When that bookmark is loaded, it loads a barebone web with javascript to detect again which tags are on the address with #, and then load via Ajax the real content.
That's why, for example, the thumbnail of Twitter page on Google Chrome always shows an interface without messages, because when that thumbnail is generated, the Ajax still has not loaded the content.
Related
I am trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.
On website foradacopa.com and most websites I develop, we load partial page content into the current DOM to create a "one page" website experience. When these partial pages have embedded tweet buttons, the first page loaded will display the tweet button properly whereas subsequent pages loaded will not. This is because the Twitter code only does it's magic once, when the code is loaded initially.
To workaround this, you need to manually call a method that will do the magic to turn your static a tag into the iframe embedded button.
twttr.widgets.load()
I found this answer at https://dev.twitter.com/discussions/5642 from #kurrik Arne Roomann-Kurrik.
I am in the process of making a bookmarklet that allows users to highlight text on an external web page.
It runs JavaScript code that appends a JavaScript file from my server to the current web page that takes the title of the current web page, the URL of the current web page, and then the highlight text of the current web page. Finally, the user would click a button to submit the data to my web server to be saved into the database.
I have two ways of doing this: (1) have a popup with the data in the URL as parameters, or (2) to have an iframe inserted into the current web page with a form to submit the data.
In the one with the popup (1), the users browser auto blocks the popup for every domain. How do I get around this? It seems like Facebook share and twitter tweet buttons bypass the popup blocker though...
In the one with the iframe (2), I want to remove the iframe from the DOM after submitting data. However, if I'm on another domain, I get an error saying I am denied access because of origin policy something. I know it's possible because Pinterest's bookmarklet does this, it inserts an iframe then removes it from the current DOM.
I am looking for information on how these solutions work, so I can do something similar with my bookmarklet.
I resolved this by adding a post message callback after saving the data from the 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.
I am using an iframe to embed content from another site. The button in the iframe opens an overlay with a form. The problem is when the button is clicked, the overlay does not open fully. The problem is not from the overlay but from the iframe and parent.
The site i am testing on is at www.sycotickets.com/form.php. you can check it and click on the button at the bottom to see the problem. I also learnt javascript can be used to embed. Can anyone please pint me in the right direction on both issues?
There are 2 possible answers when using AJAX to load page content from a different server
1) Both servers are in a similar domain (s1.example.com, s2.example.com) in which case, you can set the domain to simply be example.com which allows full functionality withing AJAX calls.
2) Servers are on completely different domain - The server which provides the content (currently for the IFrame) must provide the data using the JSONP protocol (note the P!) this means the resulting data is loaded into a script tag which then executes. The data itself contains a JS function call eg:
{data: '<pre>Some Html</pre>'}
is actually returned as:
function SomeFuncNameSpecifiedInTheRequest({data: '<pre>Some Html</pre>'});
Instead of doing an AJAX call, you dynamically add a script tag to the page, something like:
<script type="text/javascript" src="http:/www.example.com/GetMyData.php?WrapperFunction=SomeFuncNameSpecifiedInTheRequest">
You then implement SomeFuncNameSpecifiedInTheRequest on your page and process the results when it's called. JQuery implements this functionality for you automatically (at least the client-side bit.)
See here for more information on JSONP and here for more information on setting the domain
Nothing you can do really. If it's loading from an external site browsers prevent you as a developer from accessing other sites and modifying them to try and prevent XSS attacks. You could try to fake it by moving the iframe where you want it dynamically and overlaying the black on click on your end... but that seems pretty kludgy...