How to include data from another HTML to another without PHP - javascript

This is my first question here so try to make my best so you can understand it clearly...
So my problem is that I want to load menus and footers from external HTML file so It would be easier later modify them. I can't use php or other server-side languages cause it's for school and I use it from usb stick.
My current code goes like this:
<head>
<title>SchoolStuff</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="header">
<p>[Stuff here]</p>
</div>
<script >
$("#header").load("/header.html #header");
</script> ...
and in the header.html it look like this:
<body>
<div id="header">
<ul>
<li> Just a Test</li>
</ul>
</div>
So do you guys have any ideas how to do this? It doesn't matter if you solve this in something else than jquery but it can't be server-side language. And IFrame doesn't work for this kind of purpose because I don't want the whole page. I just want specific parts.
EDIT: ok it looks like it just wont work in chrome (which is really weird though)
so if you have any ideas to get it work in chrome too it would be appreciated
EDIT 2: I decided to put my site online so it's easier for everyone...

This should be working:
<script >
$(function(){
$("#header p").load("header.html");
})
</script>

Without the use of server-side technologies, I don't believe this is possible. JavaScript adheres to the same origin policy, and when loading files via the file:// protocol the origin I believe is set to null.
In my testing, I'm getting the error: Origin null is not allowed by Access-Control-Allow-Origin. Which leads me to believe that you cannot load files from the local filesystem (small white lie, this may help).

Related

ARC packaged Android application: run JavaScript API command

I have an ARC packaged ChromeOS application and since there are some behavioral differences between ChromeOS and Android I want it to make some JavaScript API call: chrome.power.requestKeepAwake.
After the obvious step of adding "power" permission, what I've tried to do is to change contents of app_main.html:
<!DOCTYPE html>
<!-- these are the lines I've added -->
<script type="text/javascript">
chrome.power.requestKeepAwake("display");
</script>
<!-- until here -->
<iframe src="_modules/mfaihdlpglflfgpfjcifdjdjcckigekc/main.html"></iframe>
But this lead to no changes.
I'm sure, that the request is not applied as I've tried to run the same query from Chrome console and it did the thing.
How should I manage to embed this code?
Actually, I've managed to solve this issue.
The reason for it to happen is not that the code is applied in the wrong moment or something like this, but that the code you use in the app_main.html can't contain inline JavaScript, which is insecure.
That said, the code should look like:
/app_main.html:
<!DOCTYPE html>
<script type="text/javascript" language="javascript" src="power_request.js">
</script>
<iframe src="_modules/mfaihdlpglflfgpfjcifdjdjcckigekc/main.html"></iframe>
/power_request.js:
chrome.power.requestKeepAwake("display");

What happens when we close the script two times?

This might be a silly question but i want to clarify this. what happens when we close a javascript two times.
<script type="text/javascript">
alert("hello");
</script>
</script>
i did this but am not getting any error.its like we closed the script so there wont be any execution so no error will trigger i believe. will this create trouble under any situation?
why am asking this is i would like to insert a </script> at the end of a plugin where user submits their script. So that i don't have to go for extra coding on validation if this works fine without creating any trouble
The browser will treat this as an extra, unexpected end tag. It doesn't matter that it's </script>, it could also be </link> or anything else allowed in the same context.
Most browers will silently ignore such extra tags unless you enable strict / XML mode. For strict mode, you should get errors in the console.
To properly wrap plugins supplied by the user, I suggest this strategy:
Always wrap them in your own tags (so you can be sure the structure is always correct).
Check the string that you put between the two tags for <script, <script> and </script> and report an error if you find any of them.
The idea here is that users should never use script tags in their code and that you put them where they belong.
Most browsers will just remove/ignore an extra tag. I can't see that it's would cause any problems, but it is quite an ugly way to do it. I have no better suggestion currently though.
nothing. the browser ignores it but it will obviously not pass standards.
as far as i know, if the browser comes across an opening <script> tag, it assumes everything until the closing </script> tag is script. so starting with a </script> will have no effect but to cause an 'unexpected` exception.
The effect may change depending on the browser, but in teory all ignore the second tag.
XHTML rules are much stricter than those of HTML. When special XML
characters (such as & and <) are used in scripts in XHTML files, they
cause errors. The simplest workaround is to use external script files.
However, if you simply must write inline scripts, then you will need
to include CDATA (character data) sections in your file. Within CDATA
sections the special XML characters can be used freely. The following
example uses a CDATA section that is compatible with both XHTML and
HTML syntax.
<script type="text/javascript">
//<![CDATA[
alert((1 < 2) && (3 > 2));
//]]>
</script>
Also it is not a correct practice and if the script is inline than it will break W3C compliance.
To answer your direct question: Nothing would happen, it's just invalid (x)HTML which the browser ignores.
To answer your indirect question, turned out in the comments:
#DanFromGermany So you are saying validation is the only way there otherwise this way is not recomended
Validation of external resources is always critical.
For example, simply reading external scripts into <script></script> tags, tells the browser "this is no external content" and hereby grants more access, for example, read your cookies and set cookies originating from your domain (external content....your domain).
Including external JS via <script src="...">, from a different host/domain, tells the browser "this is a 3rd party script, don't allow it as much as internal scripts." It is therefore not allowed to read or set your cookies and stuff.
Why putting in </script> does not help:
An attacker is easily able to screw your whole website and let it easily disappear.
See the following:
<script>
<!-- external script start -->
</script>
</head>
<body>
Attackers website start
<div style="display:hidden;">
everything below disappears
<!--
<!-- external script end -->
</script>
</head>
<body>
<!-- your website start !-->
Still if you prevent this, an attacker can always use document.write(); to insert HTML into your Website.
Probably the best way is to executed the given JS through an iframe, from a blank page and an independent (sub)domain.
Putting things into database, or save ones JS and let it execute by a different user needs additional validation.

How to have a common header and footer in a HTML CSS web app?

I have been using ASP.NET MVC for all my projects and have been using #Html.Partial("_header") where ever I wanted to include a common static html in any of my pages.
But now I am working in a pure HTML CSS and JS web app. Here I am not using any server side technology, just a set of static contents.
Here in the site I have the following layout
----- HEADER -----
----- Changing Content ------
----- FOOTER ------
So, here is what I want, I want to somehow do the thing I used to achieve #Html.Partial()
One way I know is using IFRAMES, is there any other better way ?
i have come across this situation while making chrome extension.
What i did was storing the header footer in variable of js file and then appending that to body using jquery.i was using that js file where i wanted my header and footer to be.i just used to add js in script of head.....Boom i got my fixed header footer in page.
WORKING DEMO
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
function appendheaderfooter(){
var header="<div style='position:fixed;top:0px;background-color:aqua;'>header html</div>";
var footer="<div style='position:fixed;bottom:0px;background-color:aqua;'>footer html</div>"
$("body").append(header+footer);
}
window.onload = appendheaderfooter;
</script>
<style>
div{width:100%;}
</style>
</head>
<body><br/>
<p>Content goes here</p>
</body>
</html>
If your web app is going to be hosted on a web server supporting Server Side Includes (for example Apache) you can just add <!--#include virtual="/header.html" -->
Depending on your web server, you might need to enable the SSI first (Options +Includes in .htaccess on apache)
Frames
Frames used to be the way to go, but as time has gone by they have fallen out of favour with developers for one reason or another - note this article from 2006!
Fortunately, you seem to be in favour of avoiding frames :)
SSI over JavaScript
Secondly, Server-Side Includes (SSI) or some other server-based "include" is favoured over JavaScript, though I accept that this is not necessarily a "pure" HTML/JS/CSS solution.
The format of an SSI statement is as follows:
<!--#include virtual="../quote.txt" -->
http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm
There are many answers that reflect this view on SO - for example, the first three that appeared in searching are
here,
here and
here ...
Note that the accepted answer for that last one is recommending a JS solution, but the final paragraph states a preference for something server-side..
Compilation of your HTML code (my preferred option)
It has been a while since I have needed to create a "pure" HTML/CSS/JS website, but when doing so my preference is to keep the code modular and "compile" the HTML before deployment.
Although it requires a little additional work prior to deployment, it produces the "purest" output to be used within deployed code. You write your code as normal, use a little magic to indicate what you want included and where and then you "compile" this code into bog-standard HTML/CSS/JS files that are deployed onto your site.
This brings the ease and simplicity of using templated header/footer/menu-bar/sidebar files, with the tradeoff of needing to compile the HTML code beforehand.
SASS uses Ruby on Rails to perform this compilation. Unfortunately, a reference for its HTML equivalent is escaping me at this particular moment in time, so I shall update my answer as/when I relocate it.
Are you open to use Frameset, though it is not supported in HTML5?

How to get a Script Tag's innerHTML

Alright... I've been searching for an hour now... How does one get the innerHTML of a script tag? Here is what I've been working on...
<script type="text/javascript" src="http://www.google.com" id="externalScript"></script>
<script type="text/javascript">
function getSource()
{document.getElementById('externalScript').innerHTML;
}
</script>
I've been trying to work on a way to call another domain's page source with the script tag. I've seen a working example, but cannot find it for the life of me...
You can't do that. There is no innerHTML....all you can do is pull down the file view XMLHttpRequest to get to its contents....but of course, that is limited by same-origin policy, but script tags are not. Sorry.
actually, there is a way to get the content, but it depends on the remote server letting you get the file without valid headers and still fails a lot of the time just because of those settings. using jQuery since it's the end of my day and I'm out the door....
$.get($('#externalScript').attr('src'), function(data) {
alert(data);
});
I'm guessing you want one of two things:
To make a JavaScript file global (so that other pages can call it)
To get the script that is currently in the file
Both of those can be solved by moving your script to a .js file, and then using the tag
<script src="[path-to-file]"></script>
You can't do this. It would be a massive security problem if you could.
Script content can include any number of things. Consider this: a script loaded from a URL on your bank's website might contain all sorts of things, like your account number, your balance, and other personal information. That script would be loaded by your bank's normal pages to do what they want to do.
Now, I'm an evil hacker, and I suspect you may be a customer of Biggo Bank. So on one of my own pages, I include a <script> tag for that Biggo Bank script. The script may only load if there's a valid Biggo Bank session cookie, but what if there is? What if you visit my hacker site while you're logged in to Biggo Bank in another browser tab? Now my own JavaScript code can read the contents of that script, and your money is now mine :)
You can Use Html Parsers:
jsoup ยป jsoup: Java HTML Parser
jsoup: Java HTML Parser
jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods.
refer this:
http://jsoup.org/

insert external html

I am just learning to create websites and I have been programmming a lot of OOB languages before so I am kind of used to write small objects and just paste them where I want them.
I would like to know if there is a way to create for instace a login form och what ever piece of html that you use regulare on sites and save that to a file, html or xml and then with the help of javascript add this form onto your main site.
I will try to make an example to clearify what I want to do, it's the javascript that I do not know how to write...
form.html
< form id="form_login" >
Username: <input type="text" id="username"/><br>
Password: <input type="password" id="password"/><br>
<input type="button" id="button_login" value="log in" onclick="login(this)"/>
</form>
index.html
<html>
<head>
</head>
<body>
<div>
<script type="text/javascript" src="javascript.js"></script>
</div>
</body>
</html>
javascript.js
// this is where I am rendered clueless, I want my javascript to render out my form
$(#"div").html(form.html)
I am thinking that I should do a serverrequest to retrieve the form.html but I don't know how.
Personally, I believe that JavaScript is not very well suited for the job - people that turn off JavaScript (and Google too!) won't see important parts of your page (in Google's case, that can lead to less visitors!). Inclusions as you mention them should happen at the server. See Wikipedia's article on Server Side Includes for a possible solution.
Use load method instead:
$('#div').load('form.html', function() {
alert('Load was performed.');
});
It is better to include your files through server-side languages as well using server side includes.
You may want to consider using jQuery templates. They're in beta but have proven to be very useful to keep HTML code, well, HTML.
http://api.jquery.com/category/plugins/templates/

Categories