I'm inserting an iframe using javascript in the following way:
var s ="<p><iframe name="searchf" src="http://www.google.com" frameborder="0" width="100%" height="350"></iframe></p>";
var para = document.createElement("div");
para.innerHTML = s;
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
Let's say the parent window domain is http://www.parentwindowdomain.com/example1. The problem is that the iframe src page is somehow interpreted in such a way that the parent window domain name is prepended to the specified src domain. For example, the resulting iframe src page address would turn out to erroneously be http://www.parentwindowdomain.com/example1/"http://www.google.com"
Is there a way to override this so that, in this case, the iframe src page would be http://www.google.com ?
Can you try this one, i think it is tidier.
http://jsfiddle.net/qpkp5sb2/
var s = document.createElement("iframe");
s.setAttribute("name", "searchf");
s.setAttribute("src", "http://www.example.com");
s.setAttribute("frameborder", "0");
s.setAttribute("width", "100%");
s.setAttribute("height", "350");
var pp = document.createElement("p");
pp.appendChild(s);
var para = document.createElement("div");
para.appendChild(pp);
var element = document.getElementById("some_div_id");
var child = document.getElementById("some_fieldset_id");
element.insertBefore(para,child);
console.log(s);
Related
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.
I try to apeend some link to some div content from iframe in my page to main window.
What I did:
var mainWindow = window.parent;
var link = document.createElement("a");
var node = document.createTextNode("http://localhost/" + 'dfgdgd');
link.setAttribute('href', 'dfdsfdsf');
link.appendChild(node);
success = mainWindow.document.getElementById("suc_msg");
success.appendChild(link);
But it's doesn't work, I try to alert the success var and the result is:
[Object HTMLDivElement]
But its not append the link to the html? why is that?
I have a web application in which I have a bunch of iFrame from with source from other tools.
Now the user should have the possibility to open the iframe content in a new window / new tab, normaly I would simply add something like this:
function onButtonClick() { var src = $('#iframe').prop('src');
windows.open(src, "_blank"); }
But his would only open a new version of my iFrame context, e.g. if a user open a page in the iframe or clicked on something and javascript changed something within my iframe, the user would be loosing this value..
So, can I make a iframe Content to a new window content without loosing the dynamic state of the website within my iframe?
You cannot move around iframes between different windows without reloading, because the spec says the attributes must be reevaluated:
When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".
-- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element
(via https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)
Old answer:
// edit: Does not work as expected, since the iframe is reloaded on move and the original src is restored.
It is easy enough if you move the iframe out of the current page:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
// the popup might not be immediately available:
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 0);
// move the iframe back if the popup in closed
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
Example: http://jsfiddle.net/cpy2jykv/1/
Based on an answer to this question, I am trying to append elements directly into an empty iframe with no src attribute.
However, it seems appendChild on the iframe fails silently.
In the code below, doc.write("Hello World"); works correctly, but myform2.appendChild(input2); does not change the innerHTML of the frame, and also does not throw an error.
<html>
<body>
<iframe name = "myframe" id = "myiframe">
</iframe>
<script>
var myform2 = document.createElement("form");
var input2 = document.createElement("input");
input2.name = "quantity";
input2.value = "10";
myform2.appendChild(input2);
</script>
<script>
var getFrame = document.getElementById('myiframe');
var doc = getFrame.contentDocument || getFrame.contentWindow.document;
// doc.write("Hello World");
doc.body.appendChild(myform2); // Does not work.
</script>
</body>
</html>
What is the correct way to add a form into the iframe using raw Javascript?
I am looking for non-jQuery solutions, because I want to understand how the magic works, rather than just letting jQuery perform the magic.
I think it's a matter of timing. Try to run your script after document has been loaded:
<body onload="loadMe();">
<iframe name = "myframe" id = "myiframe">
</iframe>
<script>
function loadMe() {
var myform2 = document.createElement("form");
var input2 = document.createElement("input");
input2.name = "quantity";
input2.value = "10";
myform2.appendChild(input2);
var getFrame = document.getElementById('myiframe');
var doc = getFrame.contentDocument || getFrame.contentWindow.document;
doc.body.appendChild(myform2); // Does not work.
}
</script>
</body>
http://jsfiddle.net/GR7LJ/2/
This should work in IE 10+, Firefox, and Chrome (and maybe older versions of IE). Basically, I am just creating an iframe, selecting where to place it, placing it inside of it, then opening the new iframe's contentWindow.document and writing pure HTML/CSS/Javascript into it.
var newIframe = document.createElement("iframe");
var container = document.getElementById("container");
container.appendChild(newIframe);
var iframeContent = newIframe.contentWindow.document;
iframeContent.open();
iframeContent.write("<input type='text' />");
iframeContent.close();
newIframe.setAttribute("sandbox", "allow-scripts"); // optional sandboxing
I've run into issues before where attempting to append DOM elements does not always work so in this scenario I just pass them in as a string. I also "close" off the iframe by sandboxing it (security preference) after appending the HTML I need.
Hope this solution helps you.
Here's a fiddle: http://jsfiddle.net/fv2DB/
I want to display an image in an iframe when I click that image inside that table. Problem is, the image that gets displayed inside the iframe is too small (too large images are not a problem for now). So I attempted to pass the image in a javascript function when it is clicked and perform the necessary resizes, but here I get another problem in setting the image object as the src of the iFrame. Any suggestions? Please guide me, I would save a lot of time if you can help.
Here is the javascript code I'm having problems with.
function resize(e){
var newImg = document.createElement('img');
newImg.src = document.getElementById(e).src;
newImg.width = '448';
newImg.height = '336';
document.getElementById('passTo').src = newImg.src; /*newImg doesn't work aswell*/
}
Here is my HTML code...
<tr>
<td colspan="2" height="336">
<iframe id = "passTo" name="A" src="Activity 6.html" style="width:100%; height:100%;" scrolling="no" marginheight="0" marginwidth="0">
<p>iframes are not supported by your browser.</p>
</iframe>
</td>
</tr>
<tr>
<td><img src = "index.jpg" id = "myimg" border="3" height="48" width="64" onclick="resize(myimg)"></img></td>
<td><img src = "index.jpg" id = "myimg2" border="3" height="48" width="64" onclick="resize(myimg2)"></img></td>
</tr>
I would suggest just setting the innerHTML of the iframe body:
function resize(e){
var imgURL = document.getElementById(e).src;
var iframe = document.getElementById('passTo');
var html = "<img width='448' height='336' src=" + imgURL + ">";
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.body.innerHTML = html;
}
Or, if you wanted to create the img object yourself and insert it, you could do it like this:
function resize(e){
var imgURL = document.getElementById(e).src;
var iframe = document.getElementById('passTo');
// get iframe document in cross browser way
var doc = iframe.contentDocument || iframe.contentWindow.document;
// create img object in the iframe's document.
var img = doc.createElement("img");
img.height = 336;
img.width = 448;
img.src = imgURL;
doc.body.appendChild(img);
}
There were several issues with what you were previously trying:
You were settings the iframe.src to an image URL. When doing that, you have no control over the height and width of the img object that the iframe creates and it has nothing to do with the other img object you had created.
You can't create an img object in one document and then use it in another document.
The easiest way to put some HTML in another document is be just setting HTML on it and letting the browser create the objects in the right document.
Also, keep in mind that you can only modify or read the DOM contents of an iframe if it's in the same domain as the window/frame your code is running in (which is OK in your example).