I am wondering if there is a simple way to share html files (like the navbar, header, footer) across several pages (index.html, about.html, etc.) without using jQuery or fetch and instead using html or JavaScript only?
Assuming an 'index.html'-file and a 'common'-folder containing the 'navbar.html' and the 'footer.html':
index.html
common/navbar.html
common/footer.html
How could I get the code from inside the navbar.html or footer.html get inserted into the index.html?
You can use <object> for that.
<object type="text/html" data="common/navbar.html"></object>
<div>my index.html</div>
<object type="text/html" data="common/footer.html"></object>
Related
We created a widget as an Angular app, which our customers should be able to easily load and integrate into their own website.
The most straightforward way (which works) to do this is simply to tell them to include the default HTML tags from the index.html on their website:
<base href="/">
<app-root></app-root>
<script src="https://ourdomain.com/widget/runtime.js" type="module"></script><script src="https://ourdomain.com/widget/polyfills.js" type="module"></script><script src="https://ourdomain.com/widget/main.js" type="module"></script>
However, we would like to minimize the above code and provide them a one-liner which includes a JavaScript that loads the code dynamically into the DOM, e.g. <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script>. The script would simply consist of:
<script>
document.getElementById('widget').innerHTML = '<base href="/"><app-root></app-root>...';
</script>
The tags are loaded correctly into the DOM but the Angular app i.e. the scripts which are dynamically included into the DOM don't load.
How can this problem be solved? Is there a method in main.js which needs to be called additionally to bootstrap the Angular app?
The Angular app is deployed and hosted on our server, e.g. on https://ourdomain.com/widget. The goal is that anyone can load and plug the app into their own website using the above approach.
It turned out to work just like that:
<script>
document.write('<base href="/"><app-root></app-root>...');
</script>
I'm experimenting with building modular stand-alone (serverless) websites that can be hosted on IPFS. One of the techniques I'm using to make the websites modular is by splitting single webpages across multiple HTML files and combining them by embedding them into each other,
for example:
Webpage files: Home.html, Sidebar.html
Code in Home.html:
<html>
<head></head>
<body>
<!some code>
<object id="Sidebar" data="Sidebar.html"></object>
<!some more code>
</body>
</html>
Here is an image of what the website looks like. Note the scroll-bar that shows the the sidebar is embedded.
Website-with-Embedded-Sidebar :
I want to make that when elements of text in the sidebar (in the embedded Sidebar.html) are clicked, the JavaScript in the main page (Home.html) can react,
i.e. I want my JavaScript in Home.html to subscribe to events in the embedded Sidebar,html.
Any ideas on how best to achieve this?
I found a workaround solution that can in some cases be a suitable alternative is to call functions in the parent html file from the context of the embedded document. So instead of subscribing to click events in the embedded document from the parent document, I do it the other way round: handling the events in the embedded document and from there calling functions in the parent document.
Here is some working code:
Embedded HTML document (in a file called embedded_file.html):
<body>
<div onclick="ClickHandler(this)">Test</div>
<script>
var ClickHandler = function(sender) {
parent.OnEmbeddedDocClick(sender);
};
</script>
</body>
Main HTML page:
<body>
<object data="./embedded_file.html"></object>
<script>
var OnEmbeddedDocClick = function(sender) {
window.alert("Text in embedded file got clicked.");
};
</script>
</body>
Note that to test this, most browsers require these two files to be hosted on some form of web server instead of being stored on the local machine's filesystem, otherwise the browser's same-origin policy blocks the embedded file from accessing the javascript in the parent html file.
Hosting the files on IPFS and testing it from there was enough to evade this issue.
This is the URL of my website http://35.154.165.122/#/iLeadLandPage.
The whole website is made in Angular.
What I need to do is I need to include this website into another HTML webpage. I need to include this website into another div container of a new HTML page.
I need to do something similar to this. I am including a new URL into a div in a new webpage
...........
<div id="gabriel-embed" style="min-height: 800px;">
<script src="https://embed.gabrielny.com/eshopreact.js?key=1d767b46-27e8-4b05-8abf-776514fc9771&division=fashion&noframe=1&attachTo=gabriel-embed&eager=1"> </script>
</div> ............
How can I do this for my Angular app?
I need to replace the src in this with my Angular app's IP so that whenever I make a new HTML file the component get loaded.
How can I achieve this?
You can embed it inside an <object> tag using this:
document.getElementById("gabriel-embed").innerHTML=<object type="text/html" data="http://example.com"></object>
Be aware of using the same protocol (HTTP/HTTPS) for both resources, otherwise the browser won't allow this
As can be understood by the question I aim to create an html tag that will load an external html file. The files I want to add hold header and footer htmls, styles and scripts. I'm planning to use this on Cordova. I before saw a JQuery Mobile theme using custom html tags that include external html files for header and footer. Yet, I couldn't find a resource that explained this. How can I achieve this?
Edit: The question is not on including an external html file. It is on creating a custom tag that does that.
If you are using JQuery
$("#displayPage").load("page.html");
This loads the HTML into the element with the id: displayPage
Also, see this answer: https://stackoverflow.com/a/20868400/4064004
Using server side includes you can:
<html><head><title>Test</title></head>
<body>
<!--#include file="navbar.shtml" -->
</body>
</html>
navbar.shtml
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
You can use an iframe tag to load that html file. but as you may know each iframe takes its own resources so in a mobile app this can be pitfall.
You can also use jquery as
$('#selector').load('html_file.html');
this can be a good alternative.
The third option that I recommend you is moving that dynamic loading of contents to backend code and not concerning it in the front.
What I mean by this is that you should aim for loading those files and assembling page's parts together in the code that is supporting the UI (I dont know how cordoav works but the concept is applicable) not in the UI itself as in that case you are slowing down the UI and are also complicating things up.
So, aim for statically loading all page at once and use dynamic changing of page as low as possible.
I'am making a dynamic website in which the positioning and components of certain components like the fixed header, menubar, footer etc are common in almost all the pages. So how do I include this fixed components in my every webpage? I'am using JSP and javascript.
Thanks in advance.
If you are including static content then you can use
<%#include file="includes/header.html" %>
or for dynamic content
<jsp:include page="includes/header.jsp" />
From http://docs.oracle.com/cd/E19159-01/819-3669/bnajb/index.html:
Reusing Content in JSP Pages
There are many mechanisms for reusing JSP content in a JSP page. Three
mechanisms that can be categorized as direct reuse are discussed here:
The include directive
Preludes and codas
The jsp:include element
An indirect method of content reuse occurs when a tag file is used to
define a custom tag that is used by many web applications.
The include directive is processed when the JSP page is translated
into a servlet class. The effect of the directive is to insert the
text contained in another file (either static content or another JSP
page) into the including JSP page. You would probably use the include
directive to include banner content, copyright information, or any
chunk of content that you might want to reuse in another page. The
syntax for the include directive is as follows:
<%# include file="filename" %>
For example, all the Duke’s Bookstore application pages could include
the file banner.jspf, which contains the banner content, by using the
following directive:
<%# include file="banner.jspf" %>
Another way to do a static include is to use the prelude and coda
mechanisms described in Defining Implicit Includes. This is the
approach used by the Duke’s Bookstore application.
Because you must put an include directive in each file that reuses the
resource referenced by the directive, this approach has its
limitations. Preludes and codas can be applied only to the beginnings
and ends of pages. For a more flexible approach to building pages out
of content chunks, see A Template Tag Library.
The jsp:include element is processed when a JSP page is executed. The
include action allows you to include either a static or a dynamic
resource in a JSP file. The results of including static and dynamic
resources are quite different. If the resource is static, its content
is inserted into the calling JSP file. If the resource is dynamic, the
request is sent to the included resource, the included page is
executed, and then the result is included in the response from the
calling JSP page. The syntax for the jsp:include element is:
<jsp:include page="includedPage" />
The hello1 application discussed in Packaging Web Modules uses the
following statement to include the page that generates the response:
<jsp:include page="response.jsp"/>
So you may use
<jsp:include page="includepage.jsp" />
You can use
<head>
<?php include("path/webpage.html"); ?>
</head>