I have two HTML files that are generated from a particular application; one is a navigation "header" file and the other is a "content" file that the navigation file points to.
I have access to these files but I don't have control over how they're generated.
The files currently fit together by a third file "index.html". The index file uses document.write() to create a frameset tag and then two frame tags, one for each HTML file noted above.
I'm writing a replacement index.html file that mimic's the frameset with section tags and then adds in some features that allows the user to perform processes on the "content" html file.
So far I'm able to accomplish this by using the jquery load() method to grab the navigation and content files, but when I take the files offline (these files are meant to be consumable directly from the desktop) it does not work. I read into the jquery documentation for load() and see that it needs to be run from a server.
My questions is: is there any way to load the content from one html file into another html file without being in a hosted environment? I've seen it work in other solutions like the bwip-js and it looks like it's just using the jquery load(), but there must be something I'm missing.
Any suggestions?
Related
I want to create and manipulate several HTML files with JavaScript and NodeJS. The usual way to update HTML files is to include an update script at the top, but I want to create multiple HTML files with one JS file. I have a list with the necessary data to process. It contains the names for the HTML files and the data to put in.
My idea was to use a model.html file, which contains the data, that will be included in all of the files. This model file will be copied and renamed to the necessary file. Then I want to load it with a NodeJS module or any other way fit, so it will be recognized as "document" as if the script was included in the file. Then I want to manipulate it with plain JS. A for loop should iterate through the list and create the file, load it as "document", manipulate it and then go to the next file.
Is this possible?
If you want to just parse the HTML and get the document and operate on it you can check https://cheerio.js.org/
If you want to execute the Javascript also then you need to use Headless browsers like Headless Chrome
I have two Nativescript XML view files, one named test.xml and another named test-rtl.xml. I would like these views to share the same code behind file, for example test.js. Is this possible some how? I have heard in dev channels of the Page class containing a codeFile property but have not been able to find this property any where.
The answer by #dashman is the option you have.
Each page will have it's own page files(page.js, page.xml, page-view-model.js) What you can do is have both pages share the same model.js file. Create a shared folder and place the file in it. Just require it on the page you need it and bind it to the context and you are good to go.
You can find and example here: https://firebase.googleblog.com/2016/01/getting-started-with-nativescript-and_53.html
The user-view-model.js was used by both the login page and register page.
Each file will have it's own page file...but what you can do is have both pages connect to the same context file. Then you can build the bulk of the page logic in that file. From the xml file, you can callback directly into the model file (e.g. tap="{{ tapEvent }}").
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I want to load a java script file in a html file using object tag or any other way .
my scenario is as follows .
parent.html file contain two div inside which I am loading childOne.html and childTwo.html
files using object tag.
My problem is i have to do some work using jQuery.js , which i have to include in both the
children html files.
What I want is some WAY by which i just include the jQuery.js in the parent.html and
the two children html file should take the JS file from parent.html .
Please suggest some way .
<object> elements are, in this context, second-class <iframe>s. Different documents are different documents and have their own JavaScript environments.
You can communicate between them through parent and frames (depending on in which direction you are going in… and some browsers might not uses the frames API for <object>).
In theory, you might be able to wait for the framed documents to load, then access document.frames.frameid.contentDocument and copy the jQuery object into it - but that would probably result in a big mess as you try to get it refer to the right document object.
Your best bets are to either:
Stop trying to treat your framed documents as part of the document framing them - they are independent. If they need to use jQuery then it is their responsibility to load it. or
Stop using frames and put the HTML content of those files in the top level document so they aren't independent
You can just add the script tag with the jQuery file url into the parent.html file and it will work when children is loaded
if you do add jquery code to the child file make sure you instantiate jQuery in the file eg
<script type="text/javascript">
$(function(){});
</script>
if you do that the jQuery code will work
I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.