So I have this nice piece of javascript that will load local HTML files into my document for me on the fly, which is pretty cool.
function load_html(src) {
var html = document.createElement("object");
html.type = "text/html";
html.data = src;
document.getElementById("wrapper").appendChild(html);
}
I got the idea from the post here How do I load an HTML page in a <div> using JavaScript?.
The only problem with it is that it seems that the object tag that I create needs a default width and height, which I want it to wrap the size of it's containing elements, and the new elements that are within the object tag have their own set of css values instead of using the css value of the current page.
Does anyone know how to make the elements within my object get the css values from my current page?
Also, how can I make my object be the size of it's containing elements?
I'm sure there is an easy way to do it, but I haven't found much on object tags.
Related
I'm developing a Chrome extension. I need to clear a popup, the usual way I would do that is to change the contents of body to " " with document.getElementsByTagName('body')[0].innerHTML = '';
But I cannot do this because all content is in a javascript file.
I display some images using the following (just with varying images and styling): var img = document.createElement("img"); img.src = "info_screen.png"; img.alt = 'Information Screen'; document.body.appendChild(img);
I need to clear the popup, the issue is that I cannot use the above mentioned method (due to there being a lack of an HTML file). I looked into possibly clearing the contents of the function that included that code yet all I could find was How do I clear the content of a div using JavaScript? and Creating an element that can remove it self? yet neither suit my situation due to one asking to clear the contents of div (I don't even have an html file) and the other being to create an element that removes itself as opposed to a function. I have tried countless times to adapt the second method to function for my use-case yet none seem to succeed. How would I go about clearing the contents of this popup?
html2pdf.js is a package for generating pdf's from html it is based on jspdf and html2canvas. It has a nice feature where it can insert page-breaks in order not to split elements. The way it works is that it loops over all the elements and creates empty div's where a page break needs to be inserted. I would like to style those divs and instead of having blank white space would like to be able to insert a class to determine how they would look. The issue is I don't seem to have access to this new HTML that will be converted to a pdf. The API seems to indicate that this is possible here but when I put in code like this:
var worker = html2pdf();
worker.set(opt).from(finalHtml).toContainer().toCanvas().then(newHtml => {
console.log(newHtml)
return newHtml
})
I am getting undefined. This is true whether I chain to toCanvas() and toContainer or not. Basically I would like the html generated here, how do I access this?
I want to make sure that all JavaScript happens before the page is loaded. I am changing some innerhtml, but don't want the original innerhtml to show.
Currently, when my page loads "Books" is displayed for a brief moment, then finally when the script is read, it gets replaced. How do I prevent it from displaying the initial text?
FYI the script exists inside a php file.
<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") { //is this the "Welcome" span?
spans[i].innerHTML = myvar; //change to new value
break; //hop out of the loop, we're done
}
}
}
window.onload = function() {
changeme();
};
</script>
It is not a good idea to load JS before HTML, because you can not change the HTML elements before loading it using js.
Solution 1: Initially, keep the html tags empty that you do not want to show, because you want to show new data from JS.
Solution 2: Initially, keep the styles for those elements "display: none" and when you add the data using Js in element. Update the style to display: 'block' or any other you want, eg spans[i].style.display = 'block';.
You cant apply JS to a html document that doesnt yet exist. Your html is always loaded first, then your JS is applied. What you could be seeing here is the html is loaded and the JS is taking like what--a second to load and make the change? I recommend figuring out a more efficient way to implement the JS you need. You could just be seeing JS latency. You could use a more efficient implementation plus some CSS to fix it. I could be wrong here but it just doesn't make sense to apply JS to html went the html isnt even there yet.
How would I apply any JS to that if I'm trying to do it before the browser has even parsed and rendered my html?
Also remember that PHP is always "loaded" first, then html, then JS
I have an array filled with the HTML contents I want, as well as a way to map each of the contents to the proper iframe.
Here is the chunk of code I am using
function replaceFrames(docElement) {
Array.prototype.forEach.call(docElement.querySelectorAll("iframe, frame"), function (node) {
var name = node.getAttribute("name");
var blah = singlefile.test[name];
node.setAttribute("srcdoc",blah);
});
}
The docElement parameter is a standard DOM Element
I would use JQUERY, but I feel like I wont be able to modify what I want, since I dont have access to the Document, just the specific element/node.
The problem is, in my output document I have ">'; and <'; instead of the tags (ignore the quotes there, it was just to make it pop up.)
I have a div element with some formatted images. On user request, I load additional images asynchronously, without postback, and append the result (formatted HTML for new images) to the div element using JavaScript:
function onRequestComplete(result) {
var images = document.getElementById('images');
images.InnerHtml += result;
}
All is okay, except that part when images in the panel loaded previously flicker after the HTML is appended. As far I understand, the panel is reconstructed, not just new HTML is appended to its bottom. So it isn't web 2.0 behavior.
How can it be done without flicking? Thanks in advance.
Use the dom method of adding them:
var div = document.createElement('div');
div.innerHTML= result;
document.getElementById('images').appendChild(div);
Or if you really want to do it the right way, create an dom element for each image and then append them. This also has the benefit of preloading the images.
Or just use jQuery. ;)
Using the += operator is the same as:
images.innerHTML = images.innerHTML + result;
Which will re-render all your container, thus causing "flickering".
You should be able to have the same result appending new elements to the container, without having the flickering. For that, you will need the createElement and appendChild methods.
HTH!
When you append your content, you could tack on something like
<span class='endMarker'></span>
Then instead of just updating "innerHTML" like that, you'd look through the DOM inside the target, find the last <span> with class "endMarker", and then append new content after that. Without meaning to be a "use jQuery problem solved" person I will say that a library like that would make things a little easier. To append the content, you could drop it in a hidden div and then move it.
Make all images a single image, than use CSS positioning to show the desired section. The flickering is due to the loading of the new images.