Display html file in javascript

I am trying to display an html file in my js-code.

It is an ordinary html file that I would like to see. I have already created an IFRAME for this, but somehow I cannot go further...

This is my code fragment:

var controlAddIn = document.getElementById('controlAddIn').src = 'index.html';

So the file I want to call is "index.html". But it is not working.

If I call it in that way:

var controlAddIn = document.getElementById('controlAddIn').srcdoc = '<div><meta charset="UFT-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>';

It is working, but taht makes it very hard to read... Do you have an idea, how I can call my entire code at this point, also multiline?


JavaScript Display Possibilities

JavaScript can "display" data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Try it Yourself »

Changing the innerHTML property of an HTML element is a common way to display data in HTML.


Using document.write()

For testing purposes, it is convenient to use document.write():

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Try it Yourself »

Using document.write() after an HTML document is loaded, will delete all existing HTML:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Try it Yourself »

The document.write() method should only be used for testing.



Using window.alert()

You can use an alert box to display data:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Try it Yourself »

You can skip the window keyword.

In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Try it Yourself »


Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

You will learn more about debugging in a later chapter.

Example

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

Try it Yourself »


JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

Example

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Try it Yourself »



Back to Class 9 page »

Including JavaScript in your page is a fairly simple process.

First, What Is JavaScript?

From the W3C Schools Site:

  • JavaScript was designed to add interactivity to HTML pages
  • JavaScript is a scripting language
  • A scripting language is a lightweight programming language
  • JavaScript is usually embedded directly into HTML pages
  • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
  • Everyone can use JavaScript without purchasing a license

Including the JavaScript

You can include JavaScript in your HTML in two ways:

  • Writing the code in your HTML
  • Including it as a link to an external file

For the most part, you will include the JavaScript as an external file.

The Script Tag

The <script> tag is what we use to includes our JavaScript. It's a lot like the <link> tag you've already been using to include your CSS files.

Here's a very basic snippet of JavaScript using the script tag. This JavaScript is written directly into our HTML page. It will call and alert box as soon as the page loads.

<script type="text/javascript">
  alert("This alert box was called with the onload event");
</script>

When using the script tag, we must always use the attribute name and value of type="text/javascript".

Using the script tag to include an external JavaScript file

To include an external JavaScript file, we can use the script tag with the attribute src. You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.

<script type="text/javascript" src="path-to-javascript-file.js"></script>

This script tag should be included between the <head> tags in your HTML document.

JavaScript Files

JavaScript files are not HTML files or CSS files.
  • Always end with the js extension
  • Only include JavaScript

It's customary to put all JavaScript files in a folder called js on websites, like so:

Simple Demo of Including JavaScript

Here's a very simple demonstration of how to include an external JavaScript file into an HTML page.

  • Basic JavaScript Example

Other People's JavaScript

For this class you are not expected to write any actual JavaScript code. Lucky for you, many of people have already written lots of JavaScript and even allow you to use it for free.

JavaScript Frameworks

A Framework is basically a library of code for a certain language. Generally, the framework abstracts common tasks and makes it easier and faster for designers and developers to write their specific code. Frameworks don't really do anything by themselves, they just provide an easier platform for people to build on.

Common JavaScript Frameworks:

  • JQuery
  • Prototype
  • MooTools
  • script.aculo.us

Of these frameworks, JQuery is currently the most popular one. It's also the one you're most like to encounter being used as a buzz word.

JavaScript File Sizes

Many JavaScript files can tend to be rather large, which can slow down the load time of your page. Popular frameworks usually offer a "minified" version of their code. You should always use this version in your pages because it will have a smaller file size.

Back to Class 9 page »