how to replace innerHTML with an external (but local) file - javascript

I'm writing a firefox plugin which adds a div to the top of the page with various things in it. I can change the content of the div when writing html code directly into the .innerHTML property.... but it looks very messy and it's hard to make changes to the code.
I've read about iframes but it doesn't seem to work, nothing is shown but a vertical line. The object tag isn't working either.
Can someone help me?
My code:
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"></iframe>"; //not working

first we need to create a div and then create iframe object.then you can append iframe into created div and then append created div into Html body.
here it is,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var newDiv, iframe;
newDiv = document.createElement("div");
iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "http://en.wikipedia.org");;
$(iframe).appendTo($(newDiv));
$(newDiv).appendTo($('body'));
});
</script>
<body>
<p>testing
</p>
</body>
</html>

You could use Jquery for this.
The code below will load all the content from the htmlSheet.html into your div element.
$.get("path/path/htmlSheet.html", function (htmlSheet) {
$("#mainplugindiv").html(htmlSheet);
...
}
HTML after executing the code above:
<div id="mainplugindiv">
//here will be the content of htmlSheet.html
</div>

In your actual code you are just creating a div, but not appending it to the page.
You can use document.body.appendChild(div) to append it to the body:
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"></iframe>";
document.body.appendChild(div);
EDIT:
The actual code works fine, I even tested it in Firefox and it gives the same result, if this is not your problem then maybe you need to be more specific with the result you are getting.

You need to append element with html to show on web page.
Add HTML
<div id="div1">
</div>
And Update your Javascript
var div = document.createElement('div');
div.id='mainplugindiv';
div.style.width = '100%';
div.style.height = '150px';
div.style.background = '#313192';
div.style.color = 'white';
div.innerHTML = "<iframe src=\"test.html\"><p>test</p></iframe>"; //not working
var element = document.getElementById("div1");
element.appendChild(div);

Related

How to add div and have it behave like a dev console?

I would like to dynamically create a div on a page using JS and have it behave like a dev console behaves in Chrome and Firefox. By this, I mean that when the div is visible, it does not negatively impact the display of other DOM elements. It would simply either "push up" or "push down" elements on the page.
Is this possible without having to redesign the application's DOM elements to account for the "div console?"
I've tried generating the div as the first element on the page, but that still would not account for DOM elements that are position absolute or fixed:
div = document.createElement('div');
div.id = 'wc-test-window';
div.style.width = "100%";
div.style.height = "200px";
div.style.backgroundColor = '#eee';
div.style.position = 'relative';
div.style.top = 0;
div.style.right = 0;
div.style.display = 'none';
document.body.insertBefore(div, document.body.firstChild);
I'm disappointed in this community for all of the unconstructive comments and downvotes for a perfectly legitimate question. Anyway, I solved it using framesets and frames for anyone looking for a viable answer to this problem.
function showDevConsole() {
var fs = document.createElement('frameset'),
f1 = document.createElement('frame'),
f2 = document.createElement('frame');
fs.rows = "200,*";
fs.framespacing = "0";
// top frame - show the dev console
f1.name = "topframe";
f1.src = "dev-console.html";
f1.marginwidth = "0";
f1.marginheight = "0";
f1.noresize = "noresize";
f1.scrolling = "no";
// bottom frame - show current page
f2.name = "bottomframe";
f2.src = window.location;
f2.marginwidth = "0";
f2.marginheight = "0";
f2.scrolling = "auto";
f2.frameborder = "0";
// append the frames to the frameset
fs.appendChild(f1);
fs.appendChild(f2);
// replace the entire body with the framset containing both frames
$("body").replaceWith(fs);
return false;
}
I put the current page on the bottom frame and the "console" at the top. Any DOM manipulations that the top frame can do on the bottom frame will be done via JS using the name or id of the frame.

How to remove or hide a div, which is inside an IFRAME that pulls an external link?

var ifrm = document.createElement("iframe");
var linkFrm = "https://ExternalLink/";
Example:
var x = linkFrm.document.getElementsByClassName("class");
x.style.height = "0px";
x.style.width = "0px";
If something is inside an iframe, and you don't have the access to the iframe's original location, you simply can't manipulate elements inside it.

Dynamically adding a close button (Javascript)

Trying to add a 'X' - close button for a google maps marker. The markers will show small on the map but will enlarge when clicked (same marker, just increasing the size). I can add a close button but cannot get it to work (reduce the size back to original). Solutions need to be dynamically added please.
Fiddle: https://jsfiddle.net/gost1zLd/
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'black';
var img = document.createElement('img');
img.style.width = '100%';
img.style.height = '100%';
img.src = '';
var exit = document.createElement('div');
function large()
{
div.classList.add("large");
if (div.className == "large")
{
div.style.width = '300px';
div.style.height = '300px';
exit.innerText = 'X';
exit.style.width = '20px';
exit.style.height = '20px';
exit.style.fontSize = 'xx-large';
exit.style.fontWeight = 'bold';
exit.style.color = 'white';
exit.style.position = 'absolute';
exit.style.top = '5px';
exit.style.left = '265px';
}
}
function close()
{
div.classList.remove("large");
}
document.body.appendChild(div);
div.appendChild(img);
div.appendChild(exit);
div.addEventListener('click', large, false);
exit.addEventListener('click', close, false);
}
The problem is that removing the class large is not enough to reset the <div> to its original state since class large in itself is meaningless because it has no CSS definition. My advice is to move the styling to CSS instead of JavaScript. See fiddle: https://jsfiddle.net/gost1zLd/1/.
If you make separate functions, you can use start() again in your close() function to reset the original style. I've refactored your code a bit, hope it's self explanatory:
function close () {
div.classList.remove("large");
start();
}
Only problem with your setup is you will rebind everything when you would call start() on close(). Instead, try to separate functionality and the issue becomes clear.
DEMO
Additionally you can optimize the dynamic styling with some helper functions.
You need a function to convert a literal object to a css string.
You need a function to extend objects, similar to jQuery's $.extend() in order to set the style at once (doc) for both states (normal and large).
this.divStyle = convertLiteralToQs(cfg.div.style);
this.divLarge = convertLiteralToQs(extend(cfg.div.style, cfg.div.large));
this.div.style.cssText = this.divStyle; // normal style
this.div.style.cssText = this.divLarge; // large style
This will speed up the browser reflow for dynamic styling in JavaScript.
DEMO
Using this approach you can now more easily "style your logic" cross referencing the HTML DOM style object.

How to insert div to the top of browser body in javascript in firefox extension

I am new to firefox extension and did not know how to develop toolbar like div in javascript/content script and want to fix it to the top of body(want to push body down). please help.
var toolbarHeight = 40;
var div = document.createElement("div");
div.id = "myToolbar";
div.textContent = " ";
var st = div.style;
st.display = "block";
st.top = "0px";
st.left = "0px";
st.width = "100%";
st.height = toolbarHeight + "px";
st.background = "#F0F0F0";
st.color = "grey";
st.fontStyle = "italic";
st.position = "fixed";
document.body.style.webkitTransform = "translateY(" + toolbarHeight + "px)";
document.documentElement.appendChild(div);
****2 UPDATE:**
I have seen update this works but div also moves with body
because document.documentElement.appendChild(div);
is not working and with document.body.insertBefore(div, document.body.firstChild);
div also moves down becuase of inserting in body
This is normal because you assign in a body the style document.body.style.webkitTransform = // Chrome, Opera, Safari
document.body.style.msTransform = // IE 9
document.body.style.transform = "translateY(" + toolbarHeight + "px)";
The problem is a style.
Now there is a one possibility where you not assign this style to <body> but only on <div> and you can create inside the body two <div>.
NOTE You cannot create two <body> in a file HTML because it 's a valid document HTML INFO
Where the first <div> is the created of script that we discuss and other the rest of the <body> in the <div>.
Final you can assign the style on a div using document.getElementById("idofdiv").style.webkitTransform =document.getElementById("idofdiv").style.msTransform =document.getElementById("idofdiv").style.transform = "translateY(" + toolbarHeight + "px)";
And I shocked on the last comment.
****UPDATE:**
With the comment I understand you problem.
I copy new you script and paste on my notebook.
I open the file HTML on Firefox and Chromium (this is a name of Chrome on Ubuntu).
You can see the output and difference on imguru.
Now the problem is only on document.body.parent.style.webkitTransform='translateY(40px)';
I find why not function and this is not supported on Firefox, IE and OPERA.
You see on the site
Now I change it with
document.body.style.webkitTransform = // Chrome, Opera, Safari
document.body.style.msTransform = // IE 9
document.body.style.transform = "translateY(" + toolbarHeight + "px)";
And the output is equal on Chrome. IMGURU
OLD:
I take you script and work in my notebook.
Inside the code there is a error on document.body.parent.style.webkitTransform='translateY(40px)'; and the error is:
TypeError: document.body.parent is undefined
This I not know that is and I delete.
Now I have other error TypeError: document.body is null on var div = document.createElement("div");
I search on google and I fix this
Now I insert window.onload{ } with inside you script and I insert the tag for push body down.
<script type="text/javascript">
window.onload = function() {
//document.body.parent.style.webkitTransform ='translateY(40px)';
var div = document.createElement("div");
var br=document.createElement("br");
div.id="divs";
div.style.display='block';
div.style.width = "600px";
div.style.height = "100px";
div.style.background = "#C2E2FF";
div.style.color = "grey";
div.innerHTML = "my div";
document.body.insertBefore(br, document.body.firstChild);
document.getElementById("divs").style.fontStyle = 'italic';
document.getElementById("divs").style.position = "fixed";
}</script>
The output not view the body because the error (I say the error but this is not error) on style="fixed" because "replace" the (The element is positioned relative to the browser window).
I remove this and the output is correct.
I think that you have a problem with position and I suggest for you of use Firebug (tool of firefox and chrome) for find error
For information on the position you go on this site
Final DEMO

div is not displayed on click of image

I have an image at the top right corner of a page. on click of the image i have to display a div that looks like a table with many rows. The div has to be positioned exactly below the image.I have tried the below code snippet.
<div><img align=right src="Test.png" /></div>
sample code snippet for test function
Test(){
var hNode = document.createElement('div');
hNode.style.display = "block";
hNode.style.overflow="hidden";enter code here
hNode.style.position = "absolute";
hNode.style.width = "400px";
hNode.style.height = "30px";
hNode.style.border = "1px solid #666666";
hNode .appendChild(document.createTextNode("Test"));
}
But the div does not show up.
What is wrong with this snippet? Any help would be great..
Maybe use an onclick="Test()" in your <a> tag
first : change a to link
second : in function implementation add function keyword before Test()
<div onclick="Test()"><img align=right src="Test.png" /></div>
may help.
function Test(){
var hNode = document.createElement('div');
hNode.style.display = "block";
hNode.style.overflow ="hidden";
hNode.style.position = "absolute";
hNode.style.width = "400px";
hNode.style.height = "30px";
hNode.style.border = "1px solid #666666";
var t = document.createTextNode("Test");
hNode.appendChild(t)
document.body.appendChild(hNode);
}
while all the other answers are addressing problems with your code the answer as to why it doesn't appear is
you aren't actually appending the newly created div to document.body so although it exists it isn't part of the dom.
you can call this function using any of the methods described in other answers; i prefer something along the lines of
my link
to direct users without javascript enabled to a page telling them why javascript is necessary for that particular link.

Categories