HTA Interactive Card
HTA-applications have already been described in Habré. Now consider a specific example of the use of technology for peaceful purposes.
Sometimes you want to make a beautiful card, but do not bother with FLASH, Silverlight, etc. But knowing only HTML and a bit of JavaScript you can make excellent postcards as an application in one file! Anyone who scrolls through the article without reading it may note that it is not quite easy. But having once made a skeleton (which I provide at the end of the article for trial and free use), you will easily and quickly make new and new postcards. And even it is possible to automate the process of creating personal interactive postcards.
1. Knowledge of HTML and JavaScript.
2. Fantasy.
3. Layout skills.
From the software to create a suitable notebook, to taste. And for viewing, you will need mshta.exe supplied with any version of windows with which IE was delivered above version 5.0 (tested even on Windows 7E delivered without IE).
')
The requirements for hardware are minimal, the main thing is for the machine to be able to display all the animation that you have in mind. With * NIX operating systems, it is much more difficult, in general, we will create an application in one file, which in general will be opened by any browser, but with limited capabilities. To make a postcard completely cross-platform, you need to complement the code strongly enough. The fact is that we will create an application with the mhtml container, which only IE understands. For other browsers, it is necessary to provide for the storage of resources in the data URI constructs, which will increase the size of the application at least twice. And since we are doing exactly HTA-application with an eye on OS Windows, then in this article we will limit ourselves to the container mhtml. Of course, if the topic turns out to be interesting, next time I will show how to make a cross-browser self-contained html document.
First, create an application framework in the postcard.hta file:
As you can see inside almost normal HTML code. Only the hta tag and its attributes can confuse. Although they already adored on Habré and are described in detail in an article on Wikipedia, but since we have a specific example, I will sign out their specific application:
applicationName is an application identifier, you can write anything, let’s be “HTAPOSTCARD” for example.
innerBorder - the presence of the inner window frame. Turn off for beauty, although there may be a discrepancy in tastes. The value is either "yes" or "no".
selection — enable / disable text selection in the HTA window. For a postcard, this is not necessary, put "no" in the parameter value. Accordingly, “yes” will allow such an action.
scroll - determines the presence of a scroll bar in the window. Forbid, as the size of the content will be fixed.
caption - determines the presence of the window title. It is not useful to us, so we put “no”.
maximizebutton and minimizebutton - determines the presence of the “minimize” and “maximize” buttons with the title and the corresponding items of the system menu of the application. We have already disabled the header with buttons, so we will use these items, just to exclude the possibility of minimizing / maximizing the window through the system menu of the application.
contextmenu - finally remove the context menu (called by the right mouse button), setting the value to the parameter “no” (I want to note that having set “yes” I did not see this menu).
Now we will create a beautiful welcome page (it will be a template for the rest). Immediately return to the issue of the schedule. We create a standalone application, which should be distributed as a single file, otherwise there is no point in trying to replace flash, etc. And the answer to the question is relatively simple - let's use the MHTML data containers. For this you need to encode all the pictures in base64. For this example, I used a convenient online tool that produces not only bare code, but also some ready-made constructions. It is worth noting that the encoder accepts files no larger than 10 kilobytes, but this is actually quite a lot. For large images, you can always find other encoders in the network, without similar restrictions. This time I need a clean base64 code, I take it and enter the container at the very beginning of the file:
We'll place the container in the comment for the sake of the habit for the future - other browsers will just skip this code as a comment, and IE will see it as a native container. Let me explain what and why in this piece of code:
Content-Type: multipart / related; - specify the type of content.
boundary = "_ SEPARATOR_" - the phrase in quotes can be any, it is a container separator. Of course it should be borne in mind that the combination of letters in this phrase should in no way be found in the base64 code.
--_ SEPARATOR_ - the beginning of the next resource, begins with "-" and includes the separator specified above.
Content-Location is the label of the next resource; it is for this label that we will receive the necessary image. As always, it is better to give distinct names. In this example, this is image - image, bg - background - background.
Content-Transfer-Encoding - resource encryption method.
After this comes our coded picture, which I gave in a truncated form.
According to RFC 2387, each container must be framed with a bundle - [delimiter phrase], and the last resource must be closed with a bundle - [delimiter phrase] -. I must say that it works even without a closing delimiter at all, but we will not deviate from the standards.
Now we have an embedded image that we are going to make the background of the application. There is nothing easier:
But the attentive reader has already seen the problem. What kind of PATH_DO_FILE? And here opens the problem created by mhtml, which requires a full path to the file with the resource container. To be honest, when I found out about this (and tried to do with various variations of relative paths), my hands almost fell. But the Internet is a bottomless fount of knowledge, and a solution has been found! On one resource, I spied the idea of replacing styles during the execution of an application. The main idea is to substitute the path to the resource to the full URL of the document. I did not take the decision given by the author, because I did not want mixed scripts in the application. Let there be javascript and only. However, I certainly lost the functionality. That script immediately changes the way in all styles. Well, and here I have something to answer - I will change the ways not only in styles. About this below. And now…
To replace the full path to the resource dynamically, wait until the document body tag appears in the document and immediately embed the script:
In again, the attentive user is already sounding the alarm: - What is $ (“body”)? This is jQuery! And his indignation is correct, for convenience I use a popular framework. I think you will not have a question about how it turned out to be in a self-sufficient application, but still I will reveal this “secret”. Just take jQuery and insert the source code of the framework between the tags:
Preserving the copyright of the creators of jQuery, leave it on your conscience. But I myself believe that the work of others must be respected.
Having such excellent functionality, embedding images is not a problem:
What did we get in the end? A full-fledged, self-contained application, with a resource repository (having dug RFC deeper, you will see that there can be absolutely any resources) and powerful starting functionality (I mean the framework). In addition, the interface is marked up with regular HTML! What could be more beautiful and comfortable? The clever habrauser already has various ideas for using this unpretentious sandbox. From regular postcards and full-screen presentations to full-fledged VEB clients and desktop applications (thanks to VBScript, you can work with files and the registry).
Let's add a bit of styles, HTML-code, spice it up with scripts and get our long-awaited example in which there is text on one page, on the other - a picture from resources. Application code is completely open. Before launching it can be opened in a text editor and inspect the code.
For what?
Sometimes you want to make a beautiful card, but do not bother with FLASH, Silverlight, etc. But knowing only HTML and a bit of JavaScript you can make excellent postcards as an application in one file! Anyone who scrolls through the article without reading it may note that it is not quite easy. But having once made a skeleton (which I provide at the end of the article for trial and free use), you will easily and quickly make new and new postcards. And even it is possible to automate the process of creating personal interactive postcards.
Human requirements
1. Knowledge of HTML and JavaScript.
2. Fantasy.
3. Layout skills.
System requirements
From the software to create a suitable notebook, to taste. And for viewing, you will need mshta.exe supplied with any version of windows with which IE was delivered above version 5.0 (tested even on Windows 7E delivered without IE).
')
The requirements for hardware are minimal, the main thing is for the machine to be able to display all the animation that you have in mind. With * NIX operating systems, it is much more difficult, in general, we will create an application in one file, which in general will be opened by any browser, but with limited capabilities. To make a postcard completely cross-platform, you need to complement the code strongly enough. The fact is that we will create an application with the mhtml container, which only IE understands. For other browsers, it is necessary to provide for the storage of resources in the data URI constructs, which will increase the size of the application at least twice. And since we are doing exactly HTA-application with an eye on OS Windows, then in this article we will limit ourselves to the container mhtml. Of course, if the topic turns out to be interesting, next time I will show how to make a cross-browser self-contained html document.
Let's get started
First, create an application framework in the postcard.hta file:
<html> <head> <title>iPostcard</title> <hta:application applicationName="HTAPOSTCARD" innerBorder="no" selection="no" scroll="no" caption="no" maximizebutton="no" minimizebutton="no" contextmenu="no" /> <style type="text/css"> </style> </head> <body> </body> </html> As you can see inside almost normal HTML code. Only the hta tag and its attributes can confuse. Although they already adored on Habré and are described in detail in an article on Wikipedia, but since we have a specific example, I will sign out their specific application:
applicationName is an application identifier, you can write anything, let’s be “HTAPOSTCARD” for example.
innerBorder - the presence of the inner window frame. Turn off for beauty, although there may be a discrepancy in tastes. The value is either "yes" or "no".
selection — enable / disable text selection in the HTA window. For a postcard, this is not necessary, put "no" in the parameter value. Accordingly, “yes” will allow such an action.
scroll - determines the presence of a scroll bar in the window. Forbid, as the size of the content will be fixed.
caption - determines the presence of the window title. It is not useful to us, so we put “no”.
maximizebutton and minimizebutton - determines the presence of the “minimize” and “maximize” buttons with the title and the corresponding items of the system menu of the application. We have already disabled the header with buttons, so we will use these items, just to exclude the possibility of minimizing / maximizing the window through the system menu of the application.
contextmenu - finally remove the context menu (called by the right mouse button), setting the value to the parameter “no” (I want to note that having set “yes” I did not see this menu).
Design
Now we will create a beautiful welcome page (it will be a template for the rest). Immediately return to the issue of the schedule. We create a standalone application, which should be distributed as a single file, otherwise there is no point in trying to replace flash, etc. And the answer to the question is relatively simple - let's use the MHTML data containers. For this you need to encode all the pictures in base64. For this example, I used a convenient online tool that produces not only bare code, but also some ready-made constructions. It is worth noting that the encoder accepts files no larger than 10 kilobytes, but this is actually quite a lot. For large images, you can always find other encoders in the network, without similar restrictions. This time I need a clean base64 code, I take it and enter the container at the very beginning of the file:
<!-- /* Content-Type: multipart/related; boundary="_SEPARATOR_" --_SEPARATOR_ Content-Location:imagebg Content-Transfer-Encoding:base64 /9j/4AAQSkZJRgAB ... 5Jxk570UUUAf//Z --_SEPARATOR_-- */ --> <html>...</html> We'll place the container in the comment for the sake of the habit for the future - other browsers will just skip this code as a comment, and IE will see it as a native container. Let me explain what and why in this piece of code:
Content-Type: multipart / related; - specify the type of content.
boundary = "_ SEPARATOR_" - the phrase in quotes can be any, it is a container separator. Of course it should be borne in mind that the combination of letters in this phrase should in no way be found in the base64 code.
--_ SEPARATOR_ - the beginning of the next resource, begins with "-" and includes the separator specified above.
Content-Location is the label of the next resource; it is for this label that we will receive the necessary image. As always, it is better to give distinct names. In this example, this is image - image, bg - background - background.
Content-Transfer-Encoding - resource encryption method.
After this comes our coded picture, which I gave in a truncated form.
According to RFC 2387, each container must be framed with a bundle - [delimiter phrase], and the last resource must be closed with a bundle - [delimiter phrase] -. I must say that it works even without a closing delimiter at all, but we will not deviate from the standards.
Now we have an embedded image that we are going to make the background of the application. There is nothing easier:
<style> body{ background-image: url(mhtml:file://C:\__\postcard.hta!imagebg); </style> But the attentive reader has already seen the problem. What kind of PATH_DO_FILE? And here opens the problem created by mhtml, which requires a full path to the file with the resource container. To be honest, when I found out about this (and tried to do with various variations of relative paths), my hands almost fell. But the Internet is a bottomless fount of knowledge, and a solution has been found! On one resource, I spied the idea of replacing styles during the execution of an application. The main idea is to substitute the path to the resource to the full URL of the document. I did not take the decision given by the author, because I did not want mixed scripts in the application. Let there be javascript and only. However, I certainly lost the functionality. That script immediately changes the way in all styles. Well, and here I have something to answer - I will change the ways not only in styles. About this below. And now…
... let's start programming
To replace the full path to the resource dynamically, wait until the document body tag appears in the document and immediately embed the script:
<body> <script language=javascript> $("body").css("background-image","url(mhtml:"+document.URL+"!imagebg)"); </script> ... </body> In again, the attentive user is already sounding the alarm: - What is $ (“body”)? This is jQuery! And his indignation is correct, for convenience I use a popular framework. I think you will not have a question about how it turned out to be in a self-sufficient application, but still I will reveal this “secret”. Just take jQuery and insert the source code of the framework between the tags:
<html> <head> ... <script language=javascript> ... /* */ ... </script> </head> ... </html> Preserving the copyright of the creators of jQuery, leave it on your conscience. But I myself believe that the work of others must be respected.
Having such excellent functionality, embedding images is not a problem:
<img src="" id="imgdata1"/></div> <script language=javascript> $("#imgdata1").attr("src","mhtml:"+document.URL+"!imgdata1"); </script> Total
What did we get in the end? A full-fledged, self-contained application, with a resource repository (having dug RFC deeper, you will see that there can be absolutely any resources) and powerful starting functionality (I mean the framework). In addition, the interface is marked up with regular HTML! What could be more beautiful and comfortable? The clever habrauser already has various ideas for using this unpretentious sandbox. From regular postcards and full-screen presentations to full-fledged VEB clients and desktop applications (thanks to VBScript, you can work with files and the registry).
Let's add a bit of styles, HTML-code, spice it up with scripts and get our long-awaited example in which there is text on one page, on the other - a picture from resources. Application code is completely open. Before launching it can be opened in a text editor and inspect the code.
Source: https://habr.com/ru/post/132876/
All Articles