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?
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";
Using on page reload the page redirected to the src URL of the iframe.
To avoid this use sandbox iframe, like this:
<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>
Related
I have an iframe with src but I want to provide the link to src via javascript on click of the button. How do I pass the value?
EDIT: The webpage refreshes everytime I click on the button. It displays the webpage and then refreshes it to display again. How to avoid this?
<button type="button" onclick = "Open()">Click Me!</button>
<iframe id="iframe"
src="" //Provide link here
style="
z-index: 10;
display: None;
">
</iframe>
<script>
function Open() {
let myIframe = document.getElementById("iframe");
myIframe.style.display = 'block';
iframe.src = "www.mylink.com"
}
</script>
you're not referencing myIframe when setting src in the example, you need to do myIframe.src = 'https://www.mylink.com'
I am trying to add the CSS(width:100%) using jquery into an iframe. But don't know where I am doing wrong. I tried the below mentioned code to add the CSS in an iframe using jquery.
HTML File
<div class="col-md-12">
<div class="page-content ask-question" style="margin-top: 5px;">
<div id="preview-container" style="height: 342px;">
</div>
</div>
</div>
Jquery code
$('.ace_text-input').keyup(function(e) {
delay(function(){
var html1 = buildSource(html, js, css);
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.frameBorder="0";
iframe.height = 496;
iframe.css='width:100%;';
iframe.className = 'preview-iframe';
$('.preview-iframe').remove();
$('div#preview-container').append(iframe);
iframe.contentWindow.document.open('text/html', 'replace');
iframe.contentWindow.document.write(html1);
iframe.contentWindow.document.close();
},1000);
});
Instead of
iframe.css='width:100%;';
I Write this
iframe.setAttribute( "Style", "width : 100%;");
You can apply width on the element using Javascript Review the below code snippet. Thanks
var iframe = document.createElement('iframe').style.width = "100%";
I've iframe that i created dynamically in my html page and print button with event on click
to print iframe's content
but unfortunately it prints the whole page instead
but after long search
I've found some solutions like focus on iframe before fire print event
but it seems doesn't work on IE and MS Edge
it works in Chrome
the only solution that works with me is to open new window and copy iframe outerhtml in it and fire print event after the content loaded in new window
then close the new window immediately after the user take an action to print or cancel
but this solution doesn't look user friendly
so does it there any solution to print iframe content in IE and Edge
<html>
<head>
<title>IFrame Printing Issue</title>
<script type="text/javascript">
var g_iFrame;
function onLoad()
{
g_iFrame = document.createElement("iframe");
g_iFrame.id = "testFrame";
var style = g_iFrame.style;
style.border = "1px solid black";
style.width = "300px";
style.height = "200px";
document.body.appendChild(g_iFrame);
}
function setIFrameSrc()
{
g_iFrame.src = "Test.htm";
}
function printIFrameContent()
{
window.frames["testFrame"].contentWindow.focus();
window.frames.testFrame.contentWindow.print();
}
</script>
</head>
<body onload="onLoad();">
<button type="button" onclick="setIFrameSrc();">Set IFrame Src</button>
<br />
<button type="button" onclick="printIFrameContent();">Print IFrameContent</button>
<br />
<div style="border: 1px solid black; width: 300px; height: 200px;">
This is to test printing the content of an IFrame whose src is set dynamically.
</div>
</body>
</html>
You may first check if the user agent is IE:
function printIFrameContent()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf ("MSIE ");
var iframe = document.getElementById("testFrame");
if (msie > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.print();
}
}
Referred a similar answer on SO: https://stackoverflow.com/a/19639241/1500851
This is my first question on stackoverflow. What I want to do is to create an iframe into test div with javascript and add html code in it. Also I want to resize iframe's height dynamically. The code below works good for me only if I set dynamic_div's height more than 150px. If the height of the dynamic_div less than 150 it automatically sets iframe's height to 150. How can I fix this problem ?
P.S : html code in the html variable is dynamic. So I can not change anything in it.
Many Thanks.
<html>
<head>
</head>
<body>
<div id="test" style="border: 1px solid;"></div>
<script text="text/javascript">
var html = "<html><head></head><body><div id=\"container\" style=\"text-align:center;padding:8px 0;background-color:#f0f0f0;border:1px dashed;\"> <div id=\"dynamic_div\" style=\"width:100%;height:50px\">Some Content</div></body></html>";
function ui_aa(element_id,content){ // create an iframe and add txt into it.
var iframe = document.getElementById(element_id).appendChild(document.createElement('iframe')),
doc = iframe.contentWindow.document;
iframe.style.cssText = "width:100%";
iframe.frameBorder = 0;
iframe.scrolling= 'no';
doc.open().write(content);
doc.close();
doc.body.style.cssText = "margin:0px;padding:0px;height:100%";
var height = doc.body.scrollHeight;
iframe.height = height;
};
ui_aa('test',html);
</script>
</body>
</html>
The iframe gets a height value for unknown reason to me, to give it a height value such as 0 did the trick, The doc.body.style.cssText overwrites the height value to 100% anyway, so you don't need to worry.
function ui_aa(element_id,content){ // create an iframe and add txt into it.
iframe.height= '0';
};
Example JSFiddle
Because of your <div id="container">
Automatically it wont be as tall as your iframe.
Add some style to it.
#container {
height: 100%;
display: block;
}
Hi I want to rewrite an image Src and Style element.
The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element.
I came up with this but I'm not good at javascript:
function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style.
Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose).
Any help is greatly apreciated!!
Thanks
update:
what I came up with so far is this:
function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;
for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}
window.onload = function()
{
ChangeImageSrc();
};
I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part):
onload="javascript:ChangeImageSrc()
Both don't work this far :(
Ok AffluentOwl, here's the HTML:
<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000" data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>
As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me).
The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code).
Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads.
<html>
<script>
function ChangeImageSrc() {
var div = document.getElementsByClassName("gallery-group images-1")[0];
var images = div.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
images[i].setAttribute("style", div.getAttribute("style"));
}
}
window.onload = ChangeImageSrc;
</script>
<div class="gallery-group images-1" style="width: 500px; height: 500px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
</div>
</div>
</html>
It would probably be helpful for you to look into the element selection functions in Javascript.
getElementById
getElementsByClassName
getElementsByTagName
querySelector
You may even like to use jQuery which makes selecting elements much easier. In jQuery you could replace the <script> code with the following for the same result as above:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var div = $(".gallery-group.images-1");
var images = div.find("img");
images.each(function() {
$(this).attr("src", $(this).attr("data-orig-file"));
$(this).attr("style", div.attr("style"));
});
});
</script>