Flash vs Javascript. Reflections on web applications.
Most recently, in the development of the project, my team faced the task of implementing an Internet application in which one of its components should not be reloaded when switching from one page to another. There were 2 variants, either to make a full Flash application, or use an iframe or object implementation. Flash was dropped due to the technical requirements of porting a project to portable devices, therefore JavaScript and object remained. As a result, we stopped at the scheme:
The container and two objects enclosed in it. Preliminary testing structure passed and we set about implementing but
While browser developers have not realized that sites have long ceased to be a set of html pages, and are becoming more and more like applications, we (web developers) are faced with the difficult task of correctly functioning back and forth buttons with partial content updates.
Our task is even more complicated by the fact that the actually updated page (content) is embedded in the container and even the full content page refresh, the address bar does not change. And this deprives the user of the usual way to get a direct link to the content inside the site. By the usual way, I mean copying the address from the address bar.
When the list of problems was outlined, we began to look for solutions. And it was found in window.location.hash. I remembered that I saw it being changed on one site for some reason by JS methods, but did not attach any importance to it. Later, when I did a search on my project, I finally realized that in a hash you can simply write that part of the link that usually follows the domain name /. And that's exactly what we did.
Solving the problem with the current address bar generated another. The “Forward” buttons - “Back” stopped working, because the only thing that changed in the address bar is hash. That is, in fact, the transition to history took place, but the browser seeing that the URL did not change did not overload the content page. I had to hang up the timer, which every half-second interrogated the address bar for changes and, if this happened, it overloaded the content. By shamanism and JS-kung-fu, performance was achieved in all popular browsers.
')
In the process of solving the problem with navigation, we said goodbye to XHTML-valid layout. Because the object tag, which we so successfully closed instead of the deprecated iframe, completely refused to give access to its parent window. Having spent a lot of time on shamanism, we said goodbye to the validator and inserted an iframe. In addition, IE gave me a light and a little over the topic of transparent PNGs, inserting Flash and exporting its methods to JS. But these are little things that are known to many and widely covered on the Internet, so I will not draw your attention to them.
By the way, SWFObject does not pass validation.
Initially, we could not refuse to use Flash. Then we would not have an audio player and multi-threaded loader. But instead of making visual elements in Flash, we made thin modules without an interface, allocating each living space in the amount of 1x1 pixels. If you make them homeless, then in protest, they stop exporting their methods to JS. We decided to put all the modules in a container and this allowed us to do a background load. That is, you can put files on the download and leave the download page, then return to it, and the files continue to be downloaded. (This mode is not yet included in the official release, since we are not sure of its stability.) Besides, having made thin modules, we minimized the number of JS <-> Flash connections and thereby increased the fault tolerance of the entire system. But then Safari said its decisive NO. The fact is that for unknown reasons, JS cannot pull Flash for its exported methods if they are in different frames. Fortunately, after the holidays, we’ll have a MacBook in the office for production purposes and we will overcome this browser.
The very first thing that turned out - this is the fact that there is no perfect browser, everything “breaks down” when you start to drive them off-road at top speed. Particularly pleased with IE with PNG, Opera with the fact that when you change the Opacity, it stubbornly imposes it on all the internal elements of the block, because of what the dissolution effect begins to slow down, and of course FireFox, which, when processed by JS, “switches like a grandmother”. This is especially true for animation.
An attentive reader will ask me: “What does the title have to do with the content?”.
Now is a vacation, and there is time to think. Here I sit and I think it would not be easier after all to make a site in Flash. Despite all the charms that provides HTML + JS.
The container and two objects enclosed in it. Preliminary testing structure passed and we set about implementing but
Chapter 1. AJAX vs browser navigation system.
While browser developers have not realized that sites have long ceased to be a set of html pages, and are becoming more and more like applications, we (web developers) are faced with the difficult task of correctly functioning back and forth buttons with partial content updates.
Our task is even more complicated by the fact that the actually updated page (content) is embedded in the container and even the full content page refresh, the address bar does not change. And this deprives the user of the usual way to get a direct link to the content inside the site. By the usual way, I mean copying the address from the address bar.
When the list of problems was outlined, we began to look for solutions. And it was found in window.location.hash. I remembered that I saw it being changed on one site for some reason by JS methods, but did not attach any importance to it. Later, when I did a search on my project, I finally realized that in a hash you can simply write that part of the link that usually follows the domain name /. And that's exactly what we did.
Solving the problem with the current address bar generated another. The “Forward” buttons - “Back” stopped working, because the only thing that changed in the address bar is hash. That is, in fact, the transition to history took place, but the browser seeing that the URL did not change did not overload the content page. I had to hang up the timer, which every half-second interrogated the address bar for changes and, if this happened, it overloaded the content. By shamanism and JS-kung-fu, performance was achieved in all popular browsers.
')
Chapter 2. IE again lowers from heaven to earth.
In the process of solving the problem with navigation, we said goodbye to XHTML-valid layout. Because the object tag, which we so successfully closed instead of the deprecated iframe, completely refused to give access to its parent window. Having spent a lot of time on shamanism, we said goodbye to the validator and inserted an iframe. In addition, IE gave me a light and a little over the topic of transparent PNGs, inserting Flash and exporting its methods to JS. But these are little things that are known to many and widely covered on the Internet, so I will not draw your attention to them.
By the way, SWFObject does not pass validation.
Chapter 3. And here is the Flash
Initially, we could not refuse to use Flash. Then we would not have an audio player and multi-threaded loader. But instead of making visual elements in Flash, we made thin modules without an interface, allocating each living space in the amount of 1x1 pixels. If you make them homeless, then in protest, they stop exporting their methods to JS. We decided to put all the modules in a container and this allowed us to do a background load. That is, you can put files on the download and leave the download page, then return to it, and the files continue to be downloaded. (This mode is not yet included in the official release, since we are not sure of its stability.) Besides, having made thin modules, we minimized the number of JS <-> Flash connections and thereby increased the fault tolerance of the entire system. But then Safari said its decisive NO. The fact is that for unknown reasons, JS cannot pull Flash for its exported methods if they are in different frames. Fortunately, after the holidays, we’ll have a MacBook in the office for production purposes and we will overcome this browser.
Chapter 4. Today I understood a lot.
The very first thing that turned out - this is the fact that there is no perfect browser, everything “breaks down” when you start to drive them off-road at top speed. Particularly pleased with IE with PNG, Opera with the fact that when you change the Opacity, it stubbornly imposes it on all the internal elements of the block, because of what the dissolution effect begins to slow down, and of course FireFox, which, when processed by JS, “switches like a grandmother”. This is especially true for animation.
Instead of a conclusion.
An attentive reader will ask me: “What does the title have to do with the content?”.
Now is a vacation, and there is time to think. Here I sit and I think it would not be easier after all to make a site in Flash. Despite all the charms that provides HTML + JS.
Source: https://habr.com/ru/post/18220/
All Articles