Is there a way to include the content of one HTTP request (containing either text/html or text/plain) in another HTML file? Of course this can be done via AJAX or on the server side, but I'm interested in a pure browser HTML way. Perhaps using a <link> tag, or some HTML5 method I'm not familiar with?
For example:
index.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>This is my text loaded from the original document</p>
<p>This is text I want to load from another file: <span id="other"><!-- link other resource here --></p></span>
</body>
</html>
otherResource.html:
<p>This is from another resource</p>
You can try to use an iframe.
<iframe src="page.html" width="300" height="300"></iframe>
If you are thinking about including text from another page, such as a footer or header, and just trying to find a way to include that, you might try a template engine.
Template Information: http://www.creativebloq.com/web-design/templating-engines-9134396
For example with EmbedJS from the link above:
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
would allow you to include a template in a file called template.ejs.
Another option is to use a tool, such as Dreamweaver to accomplish it.
Finally you could do it with a script before you put the html on the server.
Related
I am creating a templates application where users can write any HTML/CSS code inside a textarea (E.G. a full html page pasted on a textarea). These users are mostly familiar with html and css so we have not yet implemented markdown. One important feature that we would like to add is the ability to preview the html in the textarea before submition. I have thought of ways that these can be done, but I am not sure which would be correct and most maintainable.
Preview the html inside a div in the same page - the problem I can see here is the existing CSS style might interfere with the CSS styles the user typed in the textarea. Furthermore, if the user writes body tag in the textarea, there will be another body tag inside the existing body tag of the actual page, so the html might become malformed.
Preview the html on a separate window - the problem is I do not have much control on this (if the user uses a poppup blocker, for example)
Preview the html on a separate tab - the problem is the user might be confused (E.G. closes the whole browser, thinking that it opens in a new window)
Preview the html on an iframe - this is doable, but will require me to create an additional .html file just for previewing
Preview the html on a modal - this is doable, but I am not sure if modal bodies will accept toplevel tags like title or body
Can anyone help me? Which of these potential solutions are best? Or is there a better solution?
I would use an iframe. It can run a new body and html inside of it. So if someone for example styled the body in it, it wouldn't effect the page its on. Here I wrote the code for you. Give it a shot, do some html coding in the text area and click "run"
<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>
<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>
<p>Click the button to preview your code</p>
<button onclick="myFunction()">run</button>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("output").srcdoc = "<!doctype html> <html>" + x + "</html>";
}
</script>
Have you investigated iframe's srcdoc attribute? It allows you to have a string which is a complete document without needing to create a separate file. Of course you'd have to do some escaping or something to deal with the quotes.
Here's a trivial example:
<iframe srcdoc="
<!doctype html>
<html>
<head>
</head>
<body>
hello
</body>
</html>">
</iframe>
Have a look at https://codemirror.net/
It is opensource and will give you a complete CodeEditor out of thej box.
If not:
If you want to show HTML markup in a textarea, you should escape all
‘<’ characters with <. For consistency’s sake, you may also
escape ‘>’ characters with >.
I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
i want to insert html codes using chrome extension.
Adding complex HTML using a Chrome content script
this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like
<html>
<body>
...
...
<div>
//codes
</div>
// i want my code goes here
// <div>
// </div>
...
...
</body>
</html>
if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english
You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.
There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:
http://www.w3schools.com/jsref/dom_obj_all.asp
For example, something like:
document.getElementById('test').innerHTML = "HI!";
Will insert "HI!" inside the div tags in the following HTML:
<html>
<body>
<div id='test'>
</div>
</body>
</html>
If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?
I am building a platform where people can send emails - to display a preview of the emails, I use a div below the form where they can type the message.
So the general structure looks like this:
<html>
<body>
<form>
<!-- Form to enter email here -->
</form>
<div>
<!-- Email preview here -->
<html>
<!-- Email content, updated everytime user types something --->
</html>
</div>
</bod>
</html>
However, simply using the html tags inside the html document itself seems to confuse every browser - also, it doesn't seem very clean.
Since the email that is sent will be a whole html document of its own, it would be the easiest to just put all that inside the div.
How can I do that in a valid, clean way?
Use an iframe. You can write dynamic content to them - you don't always have to load physical pages into them with an src attribute.
HTML:
<iframe name='preview'></iframe>
JS (inside DOM-ready callback)
var doc = document.preview.open("text/html","replace");
doc.write('<html><body><p>this is some content</p></body></html>');
doc.close();
You can't get this around using the approach you have used. Getting emails rendered in mail clients is a chalenge, You may want to use an iframe instead. However you have to make sure that the contents of an email copy have to be fully in a table layout format.