I want to display an HTML string as raw/plain text HTML in an iframe.
For example, display "<b>Hello World</b>" (instead of Hello World).
I've tried to display it like this:
<iframe srcdoc="<pre><b>Hello World</b></pre>"></iframe>
But it didn't work. It displays bold "Hello world" text.
I'm using Nuxt.js.
What am I missing?
With no iframe
<pre id="code"></pre>
<script>
document.getElementById('code').textContent = '<b>Hello World</b>';
</script>
With an iframe
<iframe id="codeFrame"></iframe>
<script>
function writeToIframe(iframe, markup) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<pre id="code"></pre>');
iframe.contentWindow.document.getElementById('code').textContent = markup;
iframe.contentWindow.document.close();
}
writeToIframe(document.getElementById('codeFrame'), '<b>Hello World</b>');
</script>
Related
I have a string which comes from external source. Now i want to integrate this script and style tag in my application and execute scipt.
const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'
To achieve this i created a dynamic html and appended it in iframe
const html = `<html>
<head>
${styleScriptText}
</head>
<body>
</body>
</html>`;
const iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
Now the problem is when i inspect this iframe i am not getting script and style tags please find attached
I am not sure what mistake i am doing any help is highly appreciated.
Edit: Alternative to this is there any way we can styleScriptText in application and execute script functions ?
You are inserting your html into the src attribute of the iframe instead of the iframe content
const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'
Define html and set the sourxe
const html = `<html>
<head>
${styleScriptText}
</head>
<body>
</body>
</html>`;
const iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
Set the iframe content
var doc = iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
document.body.appendChild(iframe);
I am trying to add text to two DIVS with ids= DIV1 and DIV2 in a html page(home.html) from a js page main.js using document.write() command. On clicking the button in html page, the respective text must appear in the hmtl page.
The code is as given below. I keep getting an error: document.write can be a form of eval. Is there a possible way of using document.write() and print the text in the div sections.
HTML code:
<head>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="click!" onclick="xyz()">
</form>
</body>
JAVASCRIPT code:
function xyz(){
var arr={name:"abc",school:"pqrst"};
document.write('<div id="div1">'+"Name:"+ arr.name +'</div>');
document.write('<div id="div2">'+"School:"+ arr.school +'</div>');
}
Name:abc
School:pqrst
...using document.write() command
Don't. Only use document.write during the initial parsing of the page, or to write to a new window you've just opened (or better yet, don't use it at all).
Instead, use the DOM. Example:
function xyz(){
var arr = {name: "abc", school: "pqrst"};
addDiv("name", "Name:" + arr.name);
addDiv("age", "School:" + arr.school);
}
function addDiv(id, content) {
var d = document.createElement("div");
d.id = id;
d.textContent = content;
document.body.appendChild(d);
}
<input type="button" value="click!" onclick="xyz()">
If you have an HTML string you want to insert, you can do that with insertAdjacentHTML, but beware of combining text from an object with HTML, because any < or & in the text must be escaped correctly (more than that if you're going to put the content into an attribute, as with your id values). It happens that your two example values don't have those characters, but you can't assume that in the general case.
You can use insertAdjacentHTML() in place of document.write(). Refer this for more details
function xyz(){
var arr={name:"abc",school:"pqrst"};
document.querySelector('body').insertAdjacentHTML('beforeend','<div id="name">'+"Name:"+ arr.name +'</div>');
document.querySelector('body').insertAdjacentHTML('beforeend','<div id="age">'+"School:"+ arr.school +'</div>');
}
<body>
<form>
<input type="button" value="click!" onclick="xyz()">
</form>
I have a JS string and I would like to prevent html and js injection on my website message input.
How can I remove all HTML tags from a string except the img tag, because it is used to display emoticons like this:
<img class="emo" src="images/emo/smile.png">
I am using the following code to remove all html tags but it only works for the <br> tag and not img tag.
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
html = tmp.textContent||tmp.innerText;
return html.replace("||img||","<img>");
}
Either remove those html tags or simply display them as simple texts like:
<script> alert("hi");</script>
but except the <img> tags.
You could do like this using jQuery:
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var text = jQuery(html).text();
return text.replace("||img||","<img>");
}
Reference : Strip HTML from Text JavaScript
You can use this simple code
var html = '<img class="emo" src="images/emo/smile.png">';
var text = html.replace(/<.*?>/g, "");
replace method remove all html tags in string.
You can test every html string in bottom demo.
$("button").click(function(){
var html = $("textarea").val();
var text = html.replace(/<.*?>/g, "");
$("textarea").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea><img src=x onerror=alert("Test") /><p>aa</p></textarea>
<br />
<button>Remove HTML tags</button>
I am converting an HTML string into a pdf document using following code.
It converts the HTML to pdf well enough, but when I add the an img tag to the HTML it does not render the image in the pdf.
Here is the code I am using.
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'>";
function generatePDF(htmlString) {
if(htmlString!=null) {
alert("Html String: "+htmlString);
Ti.App.fireEvent("generatePDFfromString",{
"htmlString":htmlString,
"fileName":'MyFileName.pdf'
});
}
};
function gotPDF(filePath){
alert("Html String: "+filePath);
Ti.App.fireEvent("sendEmail",{
"fileURL":filePath,"subject":'My File Subject',
"messageBody":"",
"toReceipients":[""]
});
}
Try this:
Before
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'>";
After
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'/>";
iframe is loaded dynamically into container div inside function.
With cc.text(content); I try to update #code content.
I check changed text in runtime, it's updated but on screen value remains the same.
I am not a javascript pro, so any comments are welcome:
function ShowEditor(content) {
var url = "XmlEditor/Editor.htm";
slHost.css('width', '0%');
jobPlanContainer.css('display', 'block');
frame = $('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" class="frame" frameborder="0" />');
frame.appendTo(jobPlanIFrameContainer);
$(frame).load(function () {
var ifr = frame[0];
var doc = ifr.contentDocument || ifr.contentWindow.document;
var jdoc = $(doc);
var cc = jdoc.contents().find("#code");
// var tst = cc.text();
// alert(tst);
cc.text(content);
});
}
I get the text in commented code, but fail to update #code content.
iframe holds the following html where I omit details inside head and script:
<!doctype html>
<html>
<head></head>
<body>
<form>
<textarea id="code" name="code">some texts</textarea>
</form>
</body>
</html>
Your XML editor doesn't read more than once what's in the textarea.
A simple solution would be to generate in javascript the iframe content with the desired textarea content instead of loading it and then try to change the textarea content.
In fact (depending on the capacities of your XML Editor), you probably can do that directly in a generated text area instead of using a whole iframe to do it.