I have some basic pre-made html temapltes, some text elements within these templates are editable. The template is dynamically loaded into a wrapper div, edited and then saved. This works perfectly.
Basic example:
HTML
<div id="html-wrapper"></div>
Json response and load template into #html-wrapper
$('#html-wrapper').html(data.htmlTemplate);
Save via ajax after editing
data = {};
data.html = $('#html-wrapper').html();
// send via ajax
The above code saves everything fine. The only problem is - the templates html and body tags are stripped out by the browser. I assume the browser is trying to be clever by sripping out nested html and body tags. Is there a way around this?
Related
i have multiple jsp files(contains html) in webapp/views of my application and i want to do something like this in one jsp file
$("#my_div_id).append("my_file2.jsp")
requirement :
i want to inject a particular html content which i stored as jsp in a div block of other jsp file through jquery.
tried :
$(#id).load("file2.jsp") and its not working and came to know it makes ajax call and fetches remote content only
thought of another approach by keeping my html content in <script type = "html"> of first jsp file itself but unable to figure out how to push that html in script tag to required div element
saw other answers answer 1 answer2 but unable solve my requirement
I am trying to use mustache.js to deliver a multi-language version of my website. Therefore I am wondering if it is ok to add a <div id="mainContainer"> inside my <body> tag that contains all HTML elements of the page and then all mustache tags inside that big container via the usual:
var template = $('#mainContainer').html();
var html = Mustache.to_html(template, mustacheData);
$('#mainContainer').html(html);
It seems to work but I am wondering if there are pitfalls here (e.g. performance of reading, rendering and setting html of an entire page?). I have a dynamic bootstrap page with a couple of pages. The mustacheData would obtained the localized strings from a server in a specific language.
How can I disable javascript for some part of my page. For examle I have next structure
html
head
my js files
head
body
div
my components(they use javascript)
div
div
some untrusted content(may be some elements with javascript triggers 'on load' or smt. like that
div
body
html
I don`t want to process this content and only give it 'AS IS' but dont be vulnerable for XSS attack.
update
I want to build small service for posting text information from simple form and saving to the database. And I want to show it for user in preview mode on the html page(include two elements - header and body ).
Try replacing the <'s in your untrusted content with <'s:
var somewhatSanitizedContent = untrustedContent.replace("<", "<");
This should make all HTML tags appear as plain text, disabling <script> tags as well.
However, it may be a good idea to sanitize your input before storing it, instead of after.
I was working on reading a source of a html page (on the same site not cross domain) and use the div content to be shown on another page.
I want to access the HTML content of source.html without actually loading the file.
It is important for me to use HTML DOM only. I don't prefer to load the complete html source on a String var and parse it using REGEX or XML.
One of the approaches is to use frames and put the source html file on a frame and setting the src
parent.window.document.getElementById('sourceFrame').src = "htmlfiles/source.html";
this will load the source on a frame, allow to collect the div content by using
divHTML = parent.window.frames["sourceFrame"].document.getElementById("targetClassname").innerHTML
and show it on the target page using
document.getElementById("targetClassname").innerHTML = divHTML
This works fine but, it will load/show the HTML file. 0% width frame cannot be a solution as it WILL load the html document, its not visible that's it.
So, its about accessing the HTML content of source.html without actually loading the file, Any thoughts?
you can use an ajax request to get it, and then do with it what you want
$.ajax("htmlfiles/source.html", {
success: function(sourceFile){
// do something with the html file (sourceFile)
}
});
How can one load a HTML file and run javascript embedded in it to construct full HTML page programatically in the same way as done by browsers?
Edit 1 - I have an application where I am trying to read some data embedded in an html page of a remote website. However, after fetching this page from remote website, I don't see that data because that data is actually loaded by a javascript embedded in this HTML page after browser loads initial markup. So, I need a way in my application to trigger javascript embedded in the HTML page in order to construct full HTML page.
If you mean that you have an HTML file stored on your computer, the only way that you can compile it is with your browser. Just enter the absolute file path in your browser's url input. If I misunderstood your question, leave a comment and I'll correct my answer.
Question needs more details, but depending on what you want:
If you want to dynamically load different HTML documents, see iFrame
If you want to insert elements to an empty html document:
First, make a blank html document
<!DOCTYPE html>
<script src='main.js'></script>
</html>
Then in main.js do:
var html = document.querySelector('html');
// Append remaining page elements to the html element here.
// (the `head` and `body` elements may have been automatically created)
// You will need createElement and appendChild
createElement
appendChild