I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
If using the current Chrome, Firefox, and Safari, when switching between
http://www.facebook.com/my_name
http://www.facebook.com
The side panel for feed and chat, and any chat box actually stays. I thought when the URL changes, the page has to refresh as a whole, but obviously, this is not the case here. How is that done?
On IE 9, the URL actually became http://www.facebook.com/#! and using the "hash" to do ajax without refreshing the page, which is more understandable.
You can change the URL and page history from javascript without actually reloading the page.
See this answer on another question.
Note, that if you type the new URL by yourself and press enter the whole page reloads.
this might be the internal linking in the webpage with hidden DIVs with IDs and onClick those Hidden DIVs get visible with javascript and with AJAX content is loaded it will be a good if you browse the site disabling javascipt
I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).
When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.
Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.
The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?
The Answer is pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
You will smile :)
I've tried to change through facebook images, and this is what I saw:
In Firefox:
The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:
User clicks on "next"
JS loads the next image with tags, comments, etc and replaces the old content with them.
JS changes the hash to correspond the new image
urls look like this:
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)
As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.
In Google Chrome:
It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.
urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)
In Epiphany:
Epiphany doesn't change the URL when the image changes.
urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)
(don't have other browsers to verify right now)
The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used
You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).
You need something like this: http://code.google.com/p/reallysimplehistory/
I am not trying to track clicks or anything like other people - I just want to put a browser within a browser that can go back, forward, refresh, accept user-entered URLs, and store bookmarks. Can flash/silverlight/ajax/whatever do this? If so, how?
How about:
Solution 1:
Create or use an existing ActiveX Web Browser control.
And let your web/page host that ActiveX, or host multiple controls.
Solution 2:
Put an iframe inside a UserControl, a textbox and a go button.
Get the user provided url from textbox.
Change the src of the iframe when user clicks the go button.
_
<iframe id="iFrame" name="myFrame" src="http://bing.com"
width="100%" height="300" frameborder="0">
<p>Does your browser support iframes?</p>
</iframe>
--EDIT--
This is in response to your comment; you posed 3 questions:
For 1, thats correct, ActiveX works for IE, more specifically for Windows; there are ways you can install ActiveX for different browsers, but it(the ActiveX) would require windows OS. See this.
For 2, try handling that using JavaScript; something like following within iframe block.
<p>Back</p>
Checkout these examples.
For the third one, if I understand you correctly then you can always parse the url when user clicks onto the Go button; and respond accordingly before rendering the page.
flash can do basic html (AFAIK) not sure about silverlight.
you will struggle to do it with javascript/iframes. Especially back/forward/refresh buttons. If you are on the same domain you have some control over the iframe, but once it leaves your domain, you lose control
Would using an iframe or an object with type="text/html" be useful to you in terms of being able to embed a page within a page? Either method effectively permits loading a separate page within a page with little side-effect.
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?