Is there any standard way (or library) to superimpose one HTML5 browser window on top of another?
One purpose of this would be when upgrading the code of any existing HTML frontend while keeping the appearance exactly like the old one: you could load up the old frontend and then load up your in-progress new frontend "on top" of it and either make one of them translucent like tracing paper, or toggle one of them on and off.
Doing this with static HTML/CSS and no javascript is not too hard, but I have no idea how you would do it while maintaining all the cookies, localstorage, using javascript, etc for each "version".
I'm really looking for a way to do this in just HTML/CSS/JS (inside one actual browser), but if it can't be done, I'm interested in browser extensions that can do this.
Have you considered loading the new frontend in an iframe? You might have to attach version numbers to your cookies and localstorage, depends on the exact implementation.
Related
So I've made some little modifications to a particular website (background color, fonts, etc...) and I want these changes to be permanently applied for the next visits.
The issue is when I refresh the website, it goes back to its initial form.
Wether it's for Google or Safari web browser, is there a way to accomplish such task?
The thing is that each time you enter a website your browser downloads the whole DOM code of this site. The changes you make with Chrome's or Safari's dev tools applies only for the already-downloaded DOM that is displayed on your browser, but next time you will enter the same website, a new DOM will be downloaded and displayed - without your changes.
So, actually, I'm sorry but what you want is not possible.
What you can do is:
Save the modified HTML code to your PC (I don't know if it helps you).
Use an extension that allows you to run a JS code automatically on page load (there are bunch of this kind of extensions), and with that JS code you can manipulate the DOM the way you wish to. Yea I know, that solution involves maybe long code writing but this is the way you can change the new DOM every time - automatically.
I'll try explain the situation as best as possible..
I'm using ASP.NET with Bootstrap CSS. Every page uses the same master page. When I switch pages, the browser sometimes loads the new page without redrawing everything - only the HTML that has changed. Other times, it loads everything up again (so you see a white screen for a split second while the browser re-renders the HTML).
Is there a way I can configure the site to make the page transitions smoother? Has this got something to do with browser caching?
Well, although ASP.NET implements AJAX, and partial change of pages (through updatepanels for example) there's always a postback to the server with everything you do in .NET. Basically, there's always that "blank screen", but you probably don't see it in some cases, when the server answers quickly or you browser treats the HTML quicker for any reason.
The only possibility I know to avoid full postbacks is to get out of the .NET logic and do AJAX request yourself by writing client code only. But this possibly comes with other problems (like the controls you may add this way not being "known" by your server code, for example).
Firebug lets you edit individual web pages locally, with live updating so you can see the effects of your changes right away. Unfortunately, these changes are lost after the page is refreshed.
Is there any way to make these changes "sticky" in some way, such that repeated visits to the site would reload your own customized html/css that you edited? I'm thinking perhaps some sort of Firebug feature that I'm missing, or another plugin of some sort...
Just to be clear, I'm not talking about websites I have server side access to. I would simply like to be able to reposition the content of some pages I visit frequently so it fits better on my monitor setup, which I can do in Firebug but I have to do it every time the page loads (I would like to be able to avoid having to do that).
You should make use of the Greasemonkey and / or Stylish addons for Firefox.
These where originally developed to do exactly what you intend to achieve.
Also check out this article on how to get started with Stylish.
I am thinking to create an website that generates HTML through a wizard.Finally, I want to make the users to buy the generated HTML source if they like what they see.
But I don't want to let the users to steal the HTML, CSS and JS that I use to create the effect they want.
I want a technique which is immune to Firebug and Right Click -> View Page Source.
Any thoughts ?
edit: I remember something about iframes or frameset, but I'm not sure how to fool the browser and Firebug to execute the code without updating their capability of showing that source code. A popup is also a possible solution.
edit 2: html hosted in silverlight ? will you use it ?
The best thing you can do is to just obfuscate your code. Trying to hide the source is not going to work (for ex: if you disable right click-> view source that doesn't stop them from using the menu or saving the page or using a shortcut key or writing an app to stream the http request into a file and open that, etc).
Firstly, depending on what you are doing you can have the HTML code loaded through JS after the page load (AJAX).
As far as your JS goes:
Free Obfuscator
Not Free Obfuscator
In the end though, there is no stopping someone who really wants to get that source. Even obfuscated code can be rebuilt (though it's hell on wheels painful depending on how good the obfuscator is).
To really protect the sample HTML from prying eyes, you'd need to render it on the server-side and only pass image data to the client. If you want the user to be able to interact with the sample as if it were a normal Web page, you'll also need to send their pointer and keyboard inputs to the server and update the displayed image when necessary. At that point, though, you're basically making an HTTP-based version of VNC. This is definitely possible, but I don't think it will be easy, and I doubt there are any existing software packages to let you do this. If I were you, I'd rethink my business model a bit.
Sending XSL-templated XML to the browser may be enough fool some, and it will work more or less the same in many modern browsers including IE6 (maybe even 5.5).
But really, trying to hide the HTML code isn't going to work if anyone halfway serious wants to get it.
I am thinking to create an website that generates HTML through a wizard.
Finally, I want to make the users to buy the generated HTML source if they like what they see.
If this is what you need you might consider the possibility of creating a preview of the page as an image, and provide the download of the source only after the user agreed and paid. There is no magic way to let a browser display a code that you can't see.
You can make a video, showing the functionality and upload the same, which may help users to view / feel it.
In my rails app I have a need to save some webpages and display them to the user as images. For example, how would I save www.google.com as an image?
There is a command line utility called CutyCapt that is using the WebKit-Rendering engine to render HTML-Pages into various image formats. Maybe this is for you?
http://cutycapt.sourceforge.net/
Prohibitively difficult to do in pure Ruby, so you'd want to use an external service for this. Browsershots does it, for example, and it looks like they have an api, although I haven't used it myself. Maybe someone else can chime in with alternative but similar services.
You'll also want to read up on delayed_job or something similar, to make sure you're accessing those page images as a background task and that it doesn't interfere with your actual application.
You can't do it easily (probably can't do it at all).
Each page is just a text - html data. The view you want to make an image of is a rendered page. Browser renders the page using tonns of techniques like html parsing, javascript parsing, css parsing, font rendering, etc.. To make the screenshot of google page - you would need to do all the rendering somewhere in memory and then take a screenshot of rendered page.
That task is almost impossible (there is nothing fully impossible).
If you are really eager to donate tonns of time to accomplish that task - you should do this steps:
1) Find some opensource rendering engine. Firefox would do.
2) Find some way to communicate between ruby-on-rails and that engine.
3) Wire it all together and see the results.
However, I see steps 1 and 2 as nearly impossible.
Firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/1146/