First,I created a hidden frame like this:
var oHiddenFrame = null;
if(oHiddenFrame == null){
oHiddenFrame = document.createElement("iframe");
oHiddenFrame.name = "hiddenFrame";
oHiddenFrame.id = "hiddenFrame";
oHiddenFrame.style.height = "0px";
oHiddenFrame.style.width = "0px";
oHiddenFrame.style.position = "absolute";
oHiddenFrame.style.visbility = "hidden";
document.body.appendChild(oHiddenFrame);
}
Then,I add a event to the button like this:
var fnLocation = function(){
frames["hiddenFrame"].location.href = "http://meckmeck.cn";
}
var oButton = document.getElementById("mb_submit");
oButton.addEventListener("click", fnLocation, false);
When I click the button,I got a error:
frames.hiddenFrame is undefined
There's no such thing as document.frames. The name-indexed frame array is window.frames (aka just frames).
0-iframes are so old-school, and these days mostly associated with malware-installing exploits (especially on Chinese pages). How about using an XMLHttpRequest instead?
Related
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.
I'm new to HTML and Javascript. I'm trying to write a Javascript function to print the content of an (hidden) iframe in order to print documents (to the user, seemingly) without opening them.
I based the function on the example I found here: https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
Printing the content works fine but the trouble is removing the iframe from the document after the printing has finished. This is what my code looks like now.
function closePrint () {
var element = document.getElementById("printFrame");
element.parentNode.removeChild(element);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.width = 0;
oHiddFrame.height = 0;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.id = "printFrame";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
I changed two lines in the example from
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
to
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
As it didn't remove the iframes without the timeout.
This works fine in both IE11 and Chrome, but in IE compitability mode (which I think emulates IE7) it gives me an error "Not implemented" when I try to use setTimeout.
So my question is, is there another way to run the closePrint function after a timeout or some other way to remove the iframe from the document when I've printed the content? Any help is appreciated.
after printing, leave the iframe on document.body. When you need to add your next iframe, first run a check for its presence ~ if its present, remove it then (first two lines).
myfunction() {
const iframe = document.querySelector('iframe');
if (iframe) iframe.parentNode.removeChild(iframe);
const i = document.createElement('iframe');
i.style.display = 'none';
i.src = this.study.DocumentUrl;
document.body.appendChild(i);
document.querySelector('iframe').contentWindow.focus();
document.querySelector('iframe').contentWindow.print();
}
I created a simple bookmarklet to append 3 invisible iframe's to the current document looking like this:
javascript: (function() {
var link = window.location.href;
var desktop = link.replace(".com", ".com/purge");;
var mobile = link.replace(".com", ".com/mpurge");
var tablet = link.replace(".com", ".com/tpurge");
var platforms = [desktop,tablet,mobile];
for (i = 0;i<platforms.length; i++){
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", platforms[i]);
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild(ifrm);
if(i==platforms.length-1){
ifrm.onload = function(){
location.reload();
}
}
}
})();
what i want to do its to refresh the page im at after the third iframe is loaded but for some reason i cant get this one to work, any idea why?
thx!
i will never be == platforms.length inside of loop, because your loop condition is i<platforms.length.
Make it i == platforms.length - 1 or take reloading outside of the loop
In IE9, FormData is not supported, which makes uploading files using XMLHttpRequest a lot less trivial.
Can this be done? I've seen iFrames mentioned, and while I'm not opposed to writing some hairy code, I'm at a loss as to how to achieve this (there are many resources talking about uploading to an iFrame but not about how to get the file from the iFrame to the server).
Using vanilla JavaScript (no third party libraries), how would one upload a file asynchronously without the use of FormData?
This code should do the trick. Sorry was a long time ago and I thought that IE9 also could upload using XHR (It should, but this is the Iframe option).
It does the following:
Add a file input to your page (can also be done in HTML)
Put that file selector in a form
add credentials to the form
Submit the form to the iframe and use its page as return value.
fileSelection = document.createElement("div");
//create the file input
fileSelection.browseSelect = document.createElement("input");
fileSelection.browseSelect.type = "file";
fileSelection.browseSelect.name = "file[]";
fileSelection.browseSelect.style.display = "block";
fileSelection.browseSelect.style.position = "absolute";
fileSelection.browseSelect.style.left = "50%";
fileSelection.browseSelect.style.top = "auto";
fileSelection.browseSelect.style.height = "36px";
fileSelection.browseSelect.style.width = "36px";
fileSelection.browseSelect.style.bottom = "0px";
fileSelection.browseSelect.style.margin = "0px 0px -1px 90px";
fileSelection.browseSelect.style.filter = "alpha(opacity=0)";
fileSelection.browseSelect.style.zIndex = 14;
//Put a form in it.
fileSelection.form = document.createElement("form");
fileSelection.form.method = "POST";
fileSelection.form.action = [url to server]; //put your own file upload handler here.
fileSelection.form.enctype = "multipart/form-data";
fileSelection.form.encoding = "multipart/form-data";
fileSelection.appendChild(fileSelection.form);
//Append the file input to the form.
fileSelection.form.appendChild(fileSelection.browseSelect);
document.body.appendChild(fileSelection);
function doUploadObjectUpload()
{
var tempFrame = document.createElement("iframe");
tempFrame.src = "";
tempFrame.allowTransparancy = "true";
tempFrame.style.display = "none";
tempFrame.frameBorder = 0;
tempFrame.style.backgroundColor = "transparent";
tempFrame.onload = followUpOnHTML4Upload.bind(this,tempFrame);
tempFrame.name = "tmpFrameUpload"
this.appendChild(tempFrame);
this.form.target = tempFrame.name;
this.form.name = "uploadForm";
this.form.acceptCharset = "UTF-8"
//This is an example of a hidden input, used to pass extra vars to the server. Add more if you need them.
var tempNodePath = document.createElement("input");
tempNodePath.type = "hidden";
tempNodePath.value = [dir]; //if you want specify a target path.
tempNodePath.name = "filePath";
this.form.insertBefore(tempNodePath, this.form.childNodes[0]);
this.form.submit();
}
function followUpOnHTML4Upload(frameId)
{
//Here you can check the response that came back from the page.
}
PHP for example will store the files in $_FILES
i'm creating mulitple planet objects in javascript to handle animation.
The animation works fine for each planet but i am getting errors in IE 6/7 saying "object required on line 15 char 2"
Code:
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
function init()
{
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
earthObj.style.position= 'relative'; //error on this line
earthObj.style.left = '80px';
earthObj.style.top = 300px';
}
Before trying to call an object, test if it exists.
earthObj = document.getElementById('earth');
if(!earthObj) {
alert("Could not find Earth");
return;
}
I am on mac and don't have any IE to try. Do you get the same error, if you change the code like this:
function init() {
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
!earhtObj && alert("There is no element with id 'earth'");
earthObj.style.left = '80px';
earthObj.style.top = '300px';
earthObj.style.position= 'relative';
}
I came accros this post and thought if the error might be connected with IE6/7 bug that triggers when some global variable gets the same name as dom object.
I also moved the earthObj.style.position= 'relative'; to the end of block and expect the error to reaper at earthObj.style.left = '80px';
I've found that in IE, the function works if the script is after the defined/generated HTML elements.
i.e. place the script at the end of the HTML document, rather at the beginning, or use jquery's ready function:
$(function() {
mercObj = document.getElementById('mercury');
});