<!--#include virtual="filename.htm"-->
Currently, I don't see include file (html) content when I open page in browser.
You use virtual= if the file you are calling for is in a different directory from the page which is calling for it.
Otherwise you use file=.
Rule of Thumb
Use file= when the included file is within the same directory as
the page that wants it.
<!--#include file="included.html" -->
Use virtual= when it isn't.
<!--#include virtual="/directory/included.html" -->
That forward slash before the first directory is representative of the
domain name (server root). By using that leading slash, the server
will add the domain name to the front of the address for you.
Source: http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341
Additional Notes...
Perl-based Server Side Includes (SSI) of the format:
<!--#include virtual="/directory/included.html" -->
are not the only type of SSI you can deploy.
Alternatives include:
1) ASP Includes (for Windows-based servers):
<!-- #include virtual ="/directory/included.html" -->
2) PHP Includes (for Linux-based servers):
<?php include '[...SERVER_PATH...]/directory/included.html'; ?>
3) HTML Imports (Becoming more widely available...)
<link rel="import" href="/directory/included.html">
N.B. HTML Imports work slightly differently to the other 3 types of include, given that they are only declared in the <head> of a page (not in the <body>) and once loaded, are intended to be manipulated within the DOM via Javascript...
Related
I know that there's a meta tag to change the page's resources' incompleted URLs.
For example:
If I were to load a JS file using a <script> tag to get the file main.js, then the page would auto-complete the src from "./main.js" to "https://example.com/main.js"
<!-- This file is hosted on https://example.com -->
<script src="./main.js"></script><!-- will load https://example.com/main.js -->
But when you add the meta tag that I've talked about previously and set it to auto-complete with "https://example2.com" and tried to load the same JS file in "https://example.com" the website would load the file from "https://example2.com"
<!-- This file is hosted on https://example.com -->
<meta name="..." url="https://example2.com">
<script src="./main.js"></script><!-- will load https://example2.com/main.js -->
What's the name of that meta tag? And, if what I said wasn't true, is there any other way to achieve the same behavior?
I don't think that a meta tag like this exists. It's less that the browser 'auto-completes' links, but more that it converts relative links to absolute ones to display them in the console.
Usually, accessing scripts from another domain is quite rare, by which I mean it only occurs once or twice on a page. For only a few instances, I would just use the full URL https://example2.com in my src attributes.
If you needed the domain to remain variable, or have very many instances of it, you could use PHP. At the top of your page, specify a variable $sourceURL:
<?php $sourceURL = 'https://example2.com' ?>
And then reference this variable in your src attributes, eg. :
<script src="<?php echo($sourceURL) ?>/main.js"></script>
I'm having a small problem with Less . I can't seem to get it working. I'm running it client side. It just doesn't create the CSS, the page stays unstyled.
Header
<!-- Include LESS Stylesheets -->
<link rel="stylesheet/less" type="text/css" href="/includes/style/general.less" />
<!-- Include Scripts and Co -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
Index
<body>
</body>
general.less
#rcmsblue: #8AE9FD;
body{
background-color: #rcmsblue;
}
Am I doing something wrong?
Questioner might get the solution, here is a good info on slash rules. Few other points to consider when use LESS:
Include your stylesheets before the script and when you link more
than one, each of them compiled independently so any variables,
mixins or namespaces defined in a stylesheet are not accessible in
others. Detailed usage information available at
http://lesscss.org/usage/
And, don't forget to add MIME type that are associated content types served as static files by the web server.
File name extension: .less
MIME type: text/css
I've switched from using the Resources plugin to the new Asset Pipeline plugin. However, I've come across an issue that I'm not sure how to fix.
I use several templates (ie: _template.gsp) that are included via the g:render tag from other GSP files.
_template.gsp:
<%# page contentType="text/html;charset=UTF-8" %>
<asset:stylesheet src="_template.css"/>
<asset:javascript src="_template.js"/>
<div>
...
</div>
other GSP files:
...
<g:render template="/template"/>
...
In my _template.gsp file I include several assets that are required for the code in the template to work and/or look right. When I used the resources plugin to accomplish this, things worked as expected. Any files included in templates were moved to the HEAD section of the resulting GSP file. However, with the Asset Pipeline plugin, they stay in the same location where the template was included in the calling GSP file. And to make things worse, they aren't processed correctly, so they aren't loaded correctly in the resulting HTML file.
For example, in debug the resulting HTML file looks like this
...
<link rel="stylesheet" href="/assets/_template.css?compile=false"/>
<script src="/assets/_template.js?compile=false" type="text/javascript"></script>
<div>
...
</div>
...
and everything works (although the file ideally should be loaded in the HEAD section like it used to when using the Resources plugin).
In production the resulting HTML file looks like:
...
<link rel="stylesheet" href="/assets/_template.css"/>
<script src="/assets/_template.js" type="text/javascript"></script>
<div>
...
</div>
...
however, in production all other included assets (files included in the actual GSP file) have longer filenames that look like styles-6a85c6fa983d13b6f58e12b475e9d35c.css. The _template.css and _template.js files from the template isn't being converted to one of these long filenames and if I try to access the /assets/styles.css path I simply get a blank page.
I was able to solve the first part of my problem (the assets not being in the HEAD) by creating the following tag library:
class TemplateAssetsTagLib
{
// Define the namespace and encoding
static namespace = 'tasset'
static defaultEncodeAs = 'raw'
// Tag called to move the content of this tag to where the assets tag is located (usually the HTML HEAD section)
def head = { attrs, body ->
// Get any existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
assetBlocks = []
// Add the body of this tag to the asset blocks list
assetBlocks << body()
request.setAttribute('templateAssetBlocks', assetBlocks)
}
// Tag called to load any content that was saved using the head tag
def assets = { attrs ->
// Get all existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
return
// Output the asset blocks
assetBlocks.each { assetBlock ->
out << assetBlock
}
}
}
It's mirrored after the Asset Pipeline deferred script functionality, but more generic.
And I've been able to solve the second problem by simply renaming the assets and removing the leading underscore. For some reason assets with a leading underscore don't get compiled during WAR creation and therefore aren't accessible in production mode.
I have a bunch of htmls in the webserver context (outside the application context) in the htdocs area. These htmls use SSI to call other htmls.
Here's the problem:
When I use c:import to call the main html into the jsp, the secondary htmls inside the main html don't render / are not processed.
Is there a way to get the main html to "compile" and then return to the jsp?
JSP codes:
<c:import url="<%=/folder/Header.html%>"
HTML server side logic that needs to be processed:
<!--#include virtual="/abc/xyz.html" -->
<!--#if expr='"$Category" = "someCategory"' -->
<!--#echo var="pageTitle" -->
The prototypes were given as all htmls, so everything was in the web context and all files worked fine. The issue is moving the top layer to JSP and keeping the rest of the layers as HTML. (Its a requirement)
Any solutions /thoughts/ ideas would be welcome! Thanks for your asssistance!
Wave
EDIT: Ok, I'm getting the Header.html in an iFrame because that will initiate a new HTTP request (and thus have access to the SSI logic).
<iframe id="testSSI" src ="http://somesite.com/subfolder/testssi_1.html?pageTitle=Applications" frameborder="0" width="800px" height="300"></iframe>
The parameters are sent in the URL and I've managed to extract the control parameters using js.
My query has reduced to this:
How can I access this js value "Applications" in the SSI logic? Is it possible to set is as an environment variable? That could be pulled by the SSI logic.. I realise that the Js will run after the SSI is done, but hoping someone here would be able to help.
Thanks!
Thanks, got it done.
I accessed the parameter in SSI by using the QUERY_STRING environment variable.
Example of html call:
http://somesite.com/subfolder/testssi_1.html?Applications
Example of how i retrieved the value:
<!--#set var="pageTitle" value="$QUERY_STRING" -->
<!--#if expr=" ${pageTitle} = Program " -->
do something
<!--#else -->
do something else
<!--#endif -->
The objective here:
We use a JAVA framework. But Marketing wanted content to be editable by them in a separate process.This way, they can change the content frequently with out the intervention on the jsp / java team. (Eg. change header look and feel, add new links, etc)
Hope this helps someone out later. :)
Wave
Edit: In the example above -> "Applications" will take the logic to the else section..
In addition, to send name value pairs:
http://somesite.com/subfolder/testssi_1.html?name=Applications&app=Demo
you can reference them as:
<!--#if expr=" ${QUERY_STRING} = /name=Applications/ " -->
AND
<!--#if expr=" ${QUERY_STRING} = /app=Demo/ " -->
I want to call one html page fron another in a div.
I tried using
<include file="NavigationTree.html" />
and
<? include("/starfix/pages/NavigationTree.html"); ?>
But it doesn't work.
Am I doing something wrong or do i need to do it some other way?
You may want to consider using Server Side Includes (SSI).
You would place your HTML snippet into a separate file, such as NavigationTree.html, and then you would simply reference it in your web pages by using:
<!--#include virtual="NavigationTree.html" -->
SSI is supported by all the popular web servers, including Apache, IIS and lighttpd.
Note that if you are using a shared host, you may have to use the .shtml, .stm, or .shtm extension for SSI to work. If you have root access to your web server, it can be easily configured to enable SSI for any extension, including html.
This is not possible in pure HTML.
The former is a notation I have never seen before, it is not HTML, maybe it works in some specific server-side templating language.
The latter is PHP. It should work but you need to bear in mind include() works with absolute paths inside the server's file system.
You should specify a relative path:
<? include("./NavigationTree.html"); // will work if it's in the same directory ?>
or an absolute one that will probably look something like this:
<? include("/path/to/your/www/dir/starfix/pages/NavigationTree.html"); ?>
(ask your admin for the absolute path to your web root)
You can maybe also do a HTTP include:
but that's unwise because it tends to be slow, and generates a second request on each page request.
You can also use SSI as outlined by #Daniel.
You could also use jQuery for this,
e.g.
<div id="yourDiv" />
<script>
$("#yourDiv").load("NameOfYourPageToReadFrom.ext #NameOfDivToReadFrom");
</script>
This puts the contents of the 'NameOfDivToReadFrom' DIV in the called file ''NameOfYourPageToReadFrom' into the loaded DIV ('yourDiv') in your current file.
Remember to add the definition to the header part of your html.
e.g.
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
You can use an iframe for that, e.g.:
<iframe width="500" height="300" frameborder="no" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.example.com/page.html"></iframe>