I have a new iframe. It takes src and includes a completely empty page. Now I want to fill it with data trough javascript.
In normal cases I can do this:
var content = "Some content";
$("iframe").contents().find("body").html(content);
But this iframe is empty and has no body or html. Is it possible to include content to it anyway?
Something like this should be inserted:
<html>
<head></head>
<body>Hello</body>
</html>
Update
I can do this:
$('iframe').contents().find('html').html('<html><body>test</body></html>');
I don't know if it will render double html tags or not. In the developer tool I can't see that it add an extra.
You can get hold of the IFrame window by a normal query selector.
var myFrameDoc = document.getElementById('iframe_id').contentDocument;
If it has nothing, write it.
myFrameDoc.write('<html>');
myFrameDoc.write('<head>');
myFrameDoc.write('</head>');
myFrameDoc.write('<body>');
myFrameDoc.write('<div>Hello iFrame</div>');
myFrameDoc.write('</body>');
myFrameDoc.write('</html>');
There are more ways you can do this. I will leave it for you to realize.
In jQuery it seems to be no solution. Instead I needed to do it like this:
var content = '<html><head></head><body>Hello</body></html>';
var iframe = document.getElementById( '#iframe_id' );
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(content);
Related
https://stackoverflow.com/a/43635720
On this answer, it says to define a variable (window.parentPage = true;) in the index.html page. How can I go about doing this?
You would need to define the variable using JavaScript. You can embed some JavaScript in the HTML file by encasing it in a script tag like so:
<script type="text/javascript">
window.parentPage = true;
</script>
First you need to clearly realize your reason... what you want to achieve.
After that defining that to yourself:
First option:
You can store/save some data as stated on the link you added to your question inside a tag, like that:
<script>
var myLittleBox = "box content";
</script>
And access it later like:
<script>
myLittleBox = myLittleBox + " extra content";
console.log(myLittleBox);
//this will print "box content extra content"
</script>
You need to use the tag to access the javascript environment.
Second option:
You can save/store data with pure HTML using an with type "hidden" to not show it on screen as an input box, and changing it's value, like that:
<input type="hidden" value="box content">
But this way you'll not be able to access the data directly without aid of javascript code, unless you send this input somewhere reachable as GET or POST within a and recover it getting the respective GET or POST.
Javascript variables:
https://www.w3schools.com/js/js_variables.asp
Ex: https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables
HTML input:
https://www.w3schools.com/tags/tag_input.asp
HTML form handling:
https://www.w3schools.com/php/php_forms.asp
You're probably trying to understand the first option, but you question do not make that clear. Anyway, good studies.
Whatever you do you will have to use JavaScript in order to access the variable. An orthodox way of doing it that is not mentioned yet is using an data-attribute inside the html and than you access it by JavaScript:
const attributeName = 'data-parentPage';
const setup = () => {
let parentPageBool = document.querySelector(`html[${attributeName}]`).getAttribute(attributeName);
console.log(parentPageBool)
};
window.addEventListener('load', setup);
<html data-parentPage="true">
</html>
Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything.
If it's not possible, can I at least convert HTML into a Quill Delta?
The reason I need this is because I am grabbing the raw HTML of the text taken from Quill, so I can view it later in HTML style. Have I been doing everything wrong, and need to keep a Delta version of it as well?
On version 1.3.6,
You can use Quill.setContents(value) method.
And insert your new HTML like this:
const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)
quill.setContents(delta, 'silent')
Quill documentation: https://quilljs.com/docs/api/#setcontents
I have found a way, looking extremely closely at the documentation. Method quill.clipboard.dangerouslyPasteHTML('raw html'); does the trick. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml
Another way to insert HTML into Quill is by using vanilla JavaScript.
You can set your html to a variable, such as htmlToInsert.
Then target the contenteditable div created by Quill, by getting it by its class, ql-editor.
Finally, set the innerHTML of that div to the HTML you want to insert.
For example:
var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert
There is better way to do this:
const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup
I believe the most straight forward way is this:
quill.root.innerHTML = '<p>HTML Goes Here</p>'
You can also obtain the HTML from this property as well.
If you aren't getting the desired output. It could be because your html content is encoded.
Use this to convert it.
let realHTML = $('<textarea />').html("<p><strong>Hello</strong></p><p><br></p>").text();
console.log(realHTML);
This code will output
<p><strong>Hello</strong></p>
After this you can use this command to set the html content in quill editor
quill.root.innerHTML = realHTML;
or even this:
let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');
Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.
Just to add to #user1993629's answer, using quill.clipboard.dangerouslyPasteHtml(0, "raw html") will place the cursor at the end of the pasted content
I have loaded a html file and "placed" it inside a div:
document.getElementById('my_div').innerHTML='<object type="text/html" data="table.html" ></object>';
Works fine, but when I try to get an element by it's ID in the table (from table.html) I get null/undefined.
var table = document.getElementById('my_table'); /* Nope! */
I guess I am doing it at the wrong time or place somehow. Can you help me please?
Best Regards
I would do this with jQuery's built-in AJAX method, .load(). Like so:
$(document).ready(function(){
$('#my_div_id').load('/filepath/table.html');
var table = $('#my_table');
// Other code, presumably :)
});
I have an HTML page, X.html:
......
<div id = "content"></div>
......
I use following code to open the X.html and want to write something in the content div.
content = "show in the div in the new window";
newWindow = window.open('X.html','');
newWindow.document.getElementById("content").innerHTML = content;
This doesn't work.
I used Firebug, the code ends after the new window pops out. I don't want to write the whole thing in X.html and I want to use this simple way to write content in a specific area in the X.html.
What should I do?
I believe that will help you.
http://www.javascripter.net/faq/writingt.htm
I have a template file that is called myWebsite.html. It contains everything that HTML template needs to have. So it has HTML, HEAD and BODY tags. I want to load it with JavaScript and put into one of divs on the site. So i don't want to have the HTML, HEAD and BODY tags. How to do this?
This is a prototype of what i need to have:
$val = getData('myWebsite.html');
$val = removeHTMLHEADBODYTAGS($val); //remove these tags with everything insite, also remove the body tag but leave the contents in the body tag. Also remove the end tags of body and html - HOW TO DO THIS?
div.innerHTML = $val;
I want to do this in pure JavaScript = NO jQUERY
Why not fetch the information out of the tag and then work with that? There is no need to fetch all information and the removing html, head and body:
content = $val.getElementsByTagName('body')[0].innerHTML();
You could extract it with a regex. Something like: /\<body[^>]*\>(.*)\<\/body/m - that should return all content within the <BODY> element.
$val = getData('myWebsite.html');
var reg = /\<body[^>]*\>([^]*)\<\/body/m;
div.innerHTML = $val.match( reg )[1];
Example jsFiddle code: http://jsfiddle.net/x4hPZ/1/
With jQuery you could do it like this:
$(document).ready(function(){
var your_content = $("html").clone().find("head,body").remove().end().html();
});
get the content with "html" selector
make a copy with clone
find the tags you want to remove
remove them and
convert back to HTML
all in one line.
HTH,
--hennson
how about:
var bodyContents = htmlstring.split('<body');//no >, body could have a property
bodyContents = bodyContents[1].replace('</body>','').replace('</html>','').replace(/^.*\>/,'');
The last regex replace removes the closing > of the opening body tag, and all possible tag properties.
This is, however, not the way I would do things... If at all possible, I'd create an (i)Frame node, load the html into that frame, and get the innerHTML from the body tag. Just a suggestion.
Right, the iFrame way:
var document.ifrm = document.createElement('iframe')
document.ifrm.style = 'visibility:hidden';
document.body.appendChild(document.ifrm);
idoc = (document.ifrm.contentDocument ? document.ifrm.contentDocument : document.ifrm.contentWindow.document;)
idoc.open();
idoc.writeln('<html><head><title>foobar</title></head><body><p>Content</p></body></html>');
idoc.close();
var bodyContents = idoc.body.innerHTML;
For code explanation: http://softwareas.com/injecting-html-into-an-iframe
or any other hit on google.com for that matter :)