Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
191
rated 0 times [  197] [ 6]  / answers: 1 / hits: 29193  / 12 Years ago, tue, may 15, 2012, 12:00:00

I need to insert an iframe into a div using javascript. I need this written in javascript so I can use the code in a greasemonkey script (and greasemonkey only allows for javascript).



The greasemonkey script will be inserting AOL's search bar into various websites. I've included the working HTML code below so you can test it out to see what the end result is when this works.



Here is exactly what I need to do, written in HTML:



<div style=overflow: hidden; width: 564px; height: 43px; position: relative;>
<iframe src=http://aol.com style=border: 0pt none ; left: -453px; top: -70px; position: absolute; width: 1440px; height: 775px; scrolling=no></iframe>
</div>


I need to make that HTML code work in greasemonkey, which requires it being written in javascript. Here is what I've got so far (with my final question beneath the pseudo-code):



var makeIframe = document.createElement(iframe);
makeIframe.setAttribute(src, http://aol.com);
makeIframe.setAttribute(scrolling, no);
makeIframe.setAttribute(border, 0pt);
makeIframe.setAttribute(border, none);
makeIframe.setAttribute(left, -453px);
makeIframe.setAttribute(top, -70px);
makeIframe.setAttribute(position, absolute);
makeIframe.setAttribute(width, 1440px);
makeIframe.setAttribute(height, 775px);
makeIframe.setAttribute(scrolling, no);

var makediv = document.createElement(div);
makediv.setAttribute(height, 43px);
makediv.setAttribute(width, 564px);
makediv.setAttribute(position, relative);
makediv.setAttribute(overflow, hidden);


I already know how to either insert the iframe OR insert the div into the source code of the sites I need to insert it into, by doing this:



var getRef = document.getElementById(div-id-to-insert-element-before);
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);


What I CAN'T figure out how to do, is how to write the iframe INTO the div and then insert that div into the source code. That very last code snippet works for inserting either the div or the iframe into the source code, but I need the iframe inside the div, and then for that div to be inserted into the source code (using that last code snippet).



Any ideas?


More From » dom

 Answers
10

1- you can use element.appendChild



makediv.appendChild(makeIframe);


2- Or append iframe as html into div like this,



makediv.innerHTML = '<iframe src=http://aol.com style=border: 0pt none ;'+ 
'left: -453px; top: -70px; position: absolute;'+
'width: 1440px;'+
'height: 775px; scrolling=no></iframe>';


than insert makediv to where you want,



var getRef = document.getElementById(div-id-to-insert-element-before);
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);


UPDATE:



You cannot set style with setAttribute function,



var makeIframe = document.createElement(iframe);
makeIframe.setAttribute(src, http://aol.com);
makeIframe.setAttribute(scrolling, no);
makeIframe.style.border = none;
makeIframe.style.left = -453px;
makeIframe.style.top = -70px;
makeIframe.style.position = absolute;
makeIframe.style.width = 1440px;
makeIframe.style.height = 775px;

var makediv = document.createElement(div);
makediv.style.height = 43px;
makediv.style.width = 564px;
makediv.style.position = relative;
makediv.style.overflow = hidden;

[#85573] Monday, May 14, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jenamackennac

Total Points: 304
Total Questions: 110
Total Answers: 107

Location: Ecuador
Member since Thu, Jun 4, 2020
4 Years ago
jenamackennac questions
Fri, Feb 18, 22, 00:00, 2 Years ago
Wed, Apr 21, 21, 00:00, 3 Years ago
Thu, Apr 1, 21, 00:00, 3 Years ago
Tue, Feb 2, 21, 00:00, 3 Years ago
;