I am looking for a simple commandline script/program to automatically "inline" all external css and javascript references for a html file. I basically want to create a single self-contained html file suitable for sending via E-Mail. An additional bonus would be if it could also inline images as data: UIRs, but that part is not so important.
EDIT : I wrote a little Python script for fun. It seems to work pretty well :
Inline2Mail
Or you can still try with :
Front compiler does something like that but it implies javascript. You have an online solution as well, with premailer. Finally you have a Python and a Ruby script to do it.
There is a Node.js library which solves exactly your problem: https://github.com/remy/inliner/ It can be used both as a commandline script and a library.
It will make you a single .html file which can be sent anywhere by any means and be opened later in any browser without the need in Internet connection.
If you think about inlining CSS and Javascript to make a HTML body of an email, just forget about it. Most Email clients out there will either ignore or badly damage your styles and I think all email clients will just plainly drop the inline Javascript in the body of emails.
This Python project of mine can help with getting the CSS styles inline https://github.com/rennat/pynliner
If it's not something that needs to be automated and you're using Windows you could open the web page in Internet Explorer and save it as 'Web Archive, single file (*.mht)'. This will pack everything into a single file, including CSS, JavaScript and images. Note that the recipients needs to have access to Internet Explorer to be able to open the Web Archive. Neither Google Chrome nor Firefox supports mht files, so it's probably a Microsoft only feature.
Related
I am trying to find the way to debug javascript code inside the php file. I have a lot of javascript code embedded inside the php file.
I can debug php code using netbeans with the help of XDebug. I can also debug javascript separately inside html or js file with browser like chrome or firefox.
What I want is to debug javascript code inside the php file if it is possible. I am sure a lot of people will be using javascript embedded with php file. I don't like it personally, but I have to work it on. I know I can write the code separately in js file and then can debug with browsers, but it's lot of code, take time for the separation.
Can anybody here suggest me a way if it's possible what I am asking.
Debug Javascript in netbeans 7.4 inside PHP project
https://netbeans.org/kb/docs/php/debugging.html
https://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time+in+PhpStorm
https://blog.jetbrains.com/phpstorm/2014/06/debugging-php-and-javascript-code-at-the-same-time/
IMHO, without even looking it up, i don't think that it is (nor should) be feasible.
Here's why:
Your PHP gets processed on the server side, that's when XDebug kicks in and enables you to breakpoint all your PHP code. Then the server output gets to the client, that's when the actual JS is processed inline in the parsed HTML. Which means you would have to intercept the HTML in some way, parse it, detect eventual inlined JS scripts... and set your breakpoint(s) at that time (yes on each run), then output to client, which parses the HTML yet again to render it and process eventual breakpoints. It would be a tedious process and even more tedious to get to work i guess and that is why nobody even tried making an extension for that.
To my knowledge, inlined JS is also a lot harder to debug and i never saw an actual setup that would allow breakpointing embedded tags in a static HTML document directly from the IDE, which would've been somewhat a little easier to achieve than breakpointing JS in PHP...
Your best shot i guess would be to externalise your JS in separate files and only hard code <script src="path/to/your/app.js"></script> in your PHP templates, which indeed would be much more comfortable to work with on the long run anyways.
Then you would be able to breakpoint all the stuff in app.js, plus have an actual front-end architecture, syntax-highlighting, impress your boss, make your life a lot easier, the world a better place, etc.
Also, for reference: How to debug JavaScript code with Netbeans? (answer #45515159)
And read on: https://netbeans.org/kb/docs/webclient/html5-js-support.html
Edit: seems like setting JS breakpoints in static HTML tags is feasible in Visual Code for example -> https://github.com/Microsoft/vscode-chrome-debug/issues/122
I don't know if I am late, but, I came across the following website and was able to setup the debugger for Javascript and PHP which supports to debug embedded JavaScript in PHP scripts.
source: https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/
The website uses PHP.exe as a web service.
It is also possible to use IIS, Apache or others.
Requirements:
IDE: Visual studio code
Extension: PHP debug
Extension: Debugger for (Chrome, Firefox or Edge)
Xdebug set in php.ini
Extension in browser (optional): PHP xdebug if you want to debug on trigger.
You need to have two debuggers running at the same time one for PHP and one for JavaScrpit.
PHP sample
JavaScript sample
I worked with a lot of wordpress templates where I had to deal with some js inside my php files. Assuming that you can run your code on a server, you can easily debug your output in dev tools in chrome (if using chrome). Chrome also allows for setting of breakpoints so you can go line by line, and since your browser ultimately runs the js, you can monitor your code behavior without dealing with the php. That was my main way of dealing with this issue.
I also recommend separating as much js as possible into separate files in your assets folder. Depending on your project, you rarely have to inline your code, In my opinion it's messy to include a lot of JS right in your php, unless you use onclick="" or onchange="" attributes (which can also be handled with event listeners.
Aside from that, console.log() the crap out of everything.
I helped my self with the following steps if it could help any body else
Note:- If your rendered code is inline specific to java-script then it would hard to debug like this.
Run the required page of your application using browser like chrome, edge etc
Open the inspection page by pressing f12 or (Ctrl+Shift+I), Or you can right click on the page see the option for the inspection and click on it.
Goto sources and double click on the source file(this will be probably your php file).
If code not loaded then reload the page by pressing f5 or Ctrl+R, you will see your java-script code there embedded with the html after rendering, then you can put the break point wherever you want and debug through the browser tools(you can see some buttons there to guide you about debugging like step-over,step-into etc).
You will also see errors there regarding java-script,
Ok, recently I started doing some tutorials in javascript. Soon I had finished doing some coding on notepad, saved it as " .js" but when I tried to open it I could not find a suitable program, hopefully, soomeone can tell me a method of running the code.
The first thing I did was try and download java, but quit the installer after seeing the ad based installer including vosteran, a web browser hijacker which I have had some experience with. Finally, is it necessary to download notepad ++ for this?
Thanks
It seems that you don't have a clear understanding of JavaScript and how it interacts with HTML. Java and JavaScript are two complete differently languages.
.js files are usually linked within a .html file or some server side language file, i.e. .php, .aspx. And the HTML file is opened with your browser, for example, Internet Explorer, Google Chrome or Firefox.
You should include the .js file in your HTML file using:
<script src="yourscript.js"></script>
Within the HTML file you can then invoke the methods and use the variables declared in your custom .js file.
You run js files in a webbrowser. Include files between tags.
Example:
There are two main options of running Javascript
1 In the browser
2 Or as a process
Choosing which one depends on your code. Please post an example of a what you are working on.
If your code fits option 1, then you will just need a small HTML file that includes reference to your javascript file.
If your code is not meant for a browser, you will likely need to install Nodejs. This is a CommonJS implementation of server-side js.
A note on Java and Javascript. They are in no way related. Netscape licensed the name from makers of Java and renamed language to Javascript in hopes it would inherate some of Java's popularity.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I have a text file i want to read in my html page,both are in the same directory and i am not running a server. I intend that my users use the script offline(basically text manipulation based on expressions and preserving new line characters) .
I tried ajax call but mostly cross domain origin problem occured and i know most of the users will have this security tighened up in many browsers , so its not of use to circumvent this in only in my browser.
I want to support many browsers including old browsers as in IE7,8 etc which do not support HTML5 filereader.for the same reason reading using filesystemobject or activex is not good.
Reading the file after user select it as input , is this possible?Otherwise i would have no option then using other technologies like php,java etc which may expect my user to setup these.
Please excuse me if i am repeating this but i am a beginner web developer. I know that reading local files via javascript is not possible but is there any other way?
If you can't support FileReader, then the answer is pretty much no (at least, if you want to support a large range of browsers rather than rely on convenient feature x of browser y). Unless : you indeed increase the requirements for running the application and get some sort of local server going (for instance node.js, Apache, TomCat, etc. but like you said this will greatly increase the requirements and become cumbersome for users).
You could also rethink what it is you're trying to achieve. What are the contents of the file you want to read ? Can't these contents be part of the HTML file you're serving to your users (i.e. a large JSON Object inside a script-tag ?)
On possibility of using node.js:
Node.js is quite easy to install and assuming you are requiring from your users to install it, you can use it as a local server, which is a nodejs script of about two lines in size :). Running it locally would also omit the need to upload anything anywhere as you can directly read from the file system using the fs-object (see sitepoint.com/accessing-the-file-system-in-node-js).
STILL: from both a design and ease-of-use-point of view you might want to resort to using either another technology, or include the text file content inside the HMTL file
I am trying to start learning Adobe JavaScript and use it in HTML. I downloaded the Acrobat JavaScript Scripting Guide and Reference to help me with the code but I don't know where to put that code. I wish it can be something I put in a web browser.
I don't think I can simply embed a pdf in my HTML and use JavaScript to refer to it because the manual says:
HTML JavaScript cannot access PDF
elements, only Acrobat JavaScript
can
(I am not sure though)
Now what should I do to use Acrobat JavaScript in HTML (how to include the code)?
JavaScript code requires a host application to execute. The host application has a JavaScript engine which will execute JavaScript code in documents that the host application is fed.
The JavaScript engine in a browser will execute JavaScript code in a web page. A
PDF viewer or plugin will execute Javascript code inside a PDF document.
The JavaScript code in a web page cannot interact with the JavaScript code in a PDF document and vice versa, as they are executed by different JavaScript engines.
The execution environment for Acrobat JavaScript is within a PDF. Some PDF viewers other than Acrobat/Reader support this object model to some degree or another, but for the Real Deal, you need an Adobe PDF program.
You can download a free trial of Acrobat Pro from adobe.com, that'll get you started.
Once you have Acrobat Pro, open up any old PDF, add a button to it (NOT with LiveCycle Designer),
Edit that button's actions (last tab)
I suggest you pick the mouse-up event (the default), though there are several others to choose from.
You then select the action type "Run A JavaScript", you'll have to scroll down a bit.. and click "add"
Type your JS into the resulting JS editing window. Their JS editor is Weak.
Start typing.
Close the editor, and close the button properties.
click on the button (with the hand tool, like a normal user)
Check the JS console for where you went wrong. ;) ctrl+j to bring it up.
You can also type script directly into the JS console and hit ctrl+enter to evaluate it, but this is really only useful for one-liners.
Your magic debugging function is console.println(). Note that the JS console actually supports things like setting break points, stepping through code, and so forth. All very handy.
A good script to start might be something as trivial as:
app.alert( "hello world" );
or
console.println( this );
You'll find that this is almost always the document object.
What are you trying to do with your PDF script?
PS: There actually IS a way to communicate between a web page and a PDF, but it's a little convoluted, and I've never actually seen anyone do it. Both the page and the PDF have to use specifically named functions that are called by The Other Environment.
Other handy code snippet:
// assuming 'this' is the "doc", which as I noted earlier, is generally the case
this.getField("fieldName").value
function whatAllDoesThisThingHave(thing) {
console.println( thing );
for(var i in thing) {
console.println( "\t" + i + ": " + thing[i] );
}
}
this.submitForm(url, bazillion, other, parameters, check, the, docs);
To access the PDF control, I think your best bet would be something I found here:
Recommended way to embed PDF in HTML?
Specifically:
<div id="pdf">
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
</div>
I believe you can access the ActiveX control via getElementById("pdf_content"), though I could be mistaken. I'm a PDF Guy.
I seem to have found something from one of Adobe's manuals relevant to this question.
It is not a total answer, but at least it can help.
On Windows, the only OLE automation
supported for Adobe Reader is the
PDF browser controls interface, which
enables you to treat a PDF document as
an ActiveX document within an external
application. This makes it possible to
load a file, move to various pages
within the file, highlight a text
selection, and specify various print
and display options, as shown below.
If this helps to manipulate PDF from HTML JavaScript, the question is now:
how could I access PDF browser controls interface??
The manual says I should use, AxAcroPDFLib.AxAcroPDF this PDF browser controls but how should I access that??
I think all the puzzle pieces are on the table, I just don't know how to put them together!!