I want to create a Firefox Extension which will display a webpage. It will be like user should write a something in browser like "about:" or even a button would do ?
How can i load the WebPage in Firefox. The user should have a feel that a webpage is being loaded.
PS: I have javascript and CSS in that Page.
If i cannot make then what changes do i need to make in the web page for that change.
I also want to connect to a server and fetch XML data and want to display process that data and and display it on the page. I am developing this extension as my page is static and HTML/Javascript does not allow cross domain queries. I hope that cross-domain queries are possible if i use extension.
There is Browser XUL object that acts a an standalone browser. You can load any document inside that.
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.
I'm wondering how soundcloud can play music seamlessly when navigating between pages. It's possible that they use Ajax cuz the top bar seems not to reload when navigating but i see the URL changes. Is there any way to load content using Ajax and set the URL to another one?
HTML5 has introduced a new API, called HTML5 History API. You can read about using it here – http://diveintohtml5.info/history.html
This API lets you update browser address bar with JavaScript, so you can change the contents of the page according to the URL. The use of AJAX doesn't really have to do with UI changes, you could check the networks tab in Chrome's developer tools to see that requests are issued with XHR.
I am developing an addon using Firefox's Addon SDK (v. 1.11). My extension dynamically creates an iframe on each website and then loads an html file which includes other resources such as images, font files, etc. from the add on's local directory.
Problem
When loading any of such local resources (i.e.: "resource://" schema), the iframe fails to display them and a message is thrown:
Security Error: Content at http: //www.XXX may not load or link to
resource://XXX
This is a security measure introduced on Firefox 3. When developing without the Addon SDK, the way around it is declaring a directory with "contentaccessible=yes", making the directory's contents accessible to anyone, including my add on. However, I have not been able to find similar functionality using the Addon SDK. Is there a better way of using local data on an iframe that my addon creates and inserts into a page?
I don't think you can directly load an iFrame that points to a resource inside your URL. The browser complains because it's either breaking same origin policy or cross site scripting one. I can't remember which one right now.
if it is html content you want to load you can always inject it into the DOM and then send a message to the document object using the events API to display your custom html. I've done this in the past and it works.
so from main.js send a message to content script which will then inject your iframe html into the DOM and then you can send the document object a message to display it.
I hope this helps.
Not sure if this was the case when you posted the question, but it appears that "resource://" should no longer be used with the Addon SDK.
If you're using the resource inside of an HTML file in the extension, you can reference it locally, otherwise you should use data.url('whatever.jpg') and pass around that value as needed.
Full info is here: http://blog.mozilla.org/addons/2012/01/11/sdk-1-4-known-issue-with-hard-coding-resource-uris/
I need to launch IE from my WP7 app and load the HTML to create the page dynamically. The HTML is read from a web service and can change at any time, so I'm not able to just store the HTML in a file. Is there a way to do this -- much like you do with WebBrowser.NavigateToString(strHtml)?
-Thanks!
If you are attempting to open your HTML content in an embedded WebBrowser control you can use the "NavigateToString" function and pass it the HTML content you would like to load.
If you are trying to open it in the native IE browser on the device then I would recommend putting state information in the URL and opening the page directly with any parameters required to replicate the view in the browser via the WebBrowserTask. This way you wouldn't technically be opening the HTML code from your app but you would be able to ensure that the HTML content loaded from your service is correct based on your query parameters.
Are you looking for WebBrowserTask?
I am looking at the Gawker blogs (http://io9.com, http://lifehacker.com/) and I'm curious about how they are made.
When I click for on a link only the article part of the page reloads displaying a loading icon while it does.
But what I can't figure out is that links point to new URLs like io9.com/something/something and its not something like I see on ajax pages that they put a site.com/#something tag at the end of the url from javascript to mark the page after an ajax request.
Can I change the full blown URL from javascript or what is happening?
When it happens, the website is using the HTML5 History API. This API can change the url (via JavaScript) without changing the page.
See caniuse.com for browser support.
If you would like to implement it in yout website, backbonejs.org would be very useful.