In my application, I pop-up a new window then set the Response display on it.
It worked in all of browser versions in my development and testing environments (IE10, IE9, IE11).
But in my customer's browsers using the same IE version as mine, it does not work.
They said they updated some security patches from Microsoft. I tried to run on Chrome, and it worked. I tried some ways to simulate that issue in my PC, but the browser still can show the response.
Is there any configurations to solve it on browser? Below is my code.
var etc = "channelmode=0,dependent=0,directories=0,fullscreen=0,location=0,menubar=0,resizable=1,scrollbars=1,status=1,toolbar=0" + ",scrollbars=no,left = 0 , top = 0 , height=" + screen.availHeight + " , width=" + screen.availWidth ;
var newWindow = window.open('', "MyWindow123", etc );
newWindow.focus();
document.forms[0].target="MyWindow123";
d.action="POST";
d.submit();
You have some issues
in your paste, "d" is not set
d.action is set to "POST" but you meant d.method or d.action="someurl"
you could very likely have a security issue. It could also be a timing issue. Well known in IE
show what is calling the statements you posted. If it is a link, you need to cancel the click
Try this where I also removed all illegal spaces in the parms and removed unnecessary ones:
function myPost() {
var etc = "resizable,scrollbars,status,left=0,top=0,height="+screen.availHeight+",width="+ screen.availWidth;
var newWindow = window.open('', "MyWindow123", etc );
if (newWindow) {
newWindow.focus();
var d = document.forms[0];
d.target="MyWindow123";
d.method="POST"; // NOT action!!!
setTimeout(function() {document.forms[0].submit();},300);
}
else {
alert("Sorry your browser does not allow popups");
}
return false; // cancel the event
}
assuming (inline here, unobtrusive is better)
<a href="pleaseenablejavascript.html"
onclick="return myPost()">Submit</a>
or
<form action="someurl" onsubmit="return myPost()">...
Related
Take the following code, and serve it through a web server such as http-server (Node package). I have an example server up here.
<meta http-equiv="Cache-Control" content="max-age=0"/>
<script>
window.onload = function() {
document.write('<script>history.pushState(null, null, "bar.html");console.log("passed");\u003c/script>');
}
</script>
Note that the Cache-Control header is there because IE aggressively caches the page for some reason. This helped me during my testing, but not necessary to reproduce the issue.
When I load the page in IE11 (Windows 10), I get a SecurityError printed to the console, no URL change, and no "passed" printed.
In Edge 16, I get "passed" printed to the console, but no URL change.
In Firefox and Chrome, this works fine: the URL changes and I get "passed" printed to the console.
Why does IE behave this way, and how can I use document.write() in conjunction with pushState()? My intention is to overwrite the entire document, not simply append to it (this is why I use window.onload).
Try to add Try...Catch in your code and then try to make a test with IE11.
<html>
<body>
<script>
try {
history.pushState(null, null,"bar.html");
console.log("passed");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
Output:
If anybody ever has the same problem, there is a workaround to fix this in IE11.
Just do a location.href = location.href + '#fix-ie' to change the URL without reloading the page. This has to be done right at the start, before anything else has the chance to do a history.pushState or a history.replaceState.
This seems to "move" the location.href over into the new document.
Full code:
let original = location.href;
if (original.indexOf('#') === -1) {
location.href = original + '#ie-fix';
location.href = original + '#';
} else {
location.href = original + 'ie-fix';
location.href = original;
}
Does window.onload not work consistently with some browsers..?
I've put a script together purposely utilizing native JavaScript (no library or framework used). I know there may be some issues with cross-browser compatibility. However, there is something different occurring with the Edge browser at least.
The entire page works as expected in webkit(Chrome, not yet in Safari), and it seems to work perfect in the latest Firefox as well.
In Microsoft's Edge browser it seems to have a starter issue, or, it's not booting well every time on the onload trigger. It works perfectly sometimes, if I refresh the page enough.
What can possibly explain this? Edge may be better in this case as I'm not sure if it's working in Safari at all.
Codepen link!
window.onload = function() {
// if you're savvy enough for it... please check codepen for the full code
/* automation from input */
wght_input.oninput = function() {
x = this.value;
var bodyweight = x;
// when puts into form input
this.onchange = function() {
frmFeed[0].innerHTML = "";
recc_wght();
getadd();
whatsTotal();
resetButton.click() ;
};
var kgs = curr_wght_set_amt * kg; //convert lbs lifted to kgs
logs("The highest recorded lift was " + curr_wght_set_amt.toFixed(0) + "lbs or "+ kgs +"kgs");
}; // end active oninput
}; // end onload function
use window.addEventListener instead:
window.addEventListener('load', yourFunc, false);
You'd have to wrap everything else in a named function (yourFunc)...
I written this script, to add JavaScript functionality to my online shop, the script works fine with Firefox and Chrome, but will not run on ie, and i am not sure why?
i am using jQuery(function( $ ){ instead of .ready due to script conflicts, i have tested the script using .ready and it still does not work with ie.
if anyone has an ideas they would be much appreciated.
jQuery(function( $ ){
setInterval(function(){ updatecart(); },8000);
$('.addtobag').on('click', function(){
event.preventDefault();
var postdata = new Object();
var action = $(this).closest('form').attr('action');
$(':input',$(this).closest('form')).each(function(evt){
var L = $(this).attr('name')
postdata[L] = $(this).val();
});
$.post(action, postdata);
generate('success'); //display banner
updatecart(); //update cart
});
var postdata = new Object();
postdata['basket'] = phpbasket;
function updatecart() {
$.post("/get_cart_details.php", postdata, function (data) {
var obj = $.parseJSON(data);
$('#qty_js').text(obj.items_qty);
$('#amt_js').text(obj.items_value);
});
}
function generate(type) {
var n = noty({
text: 'The item(s) have been added to your basket.',
type: type,
dismissQueue: true,
layout: 'topCenter',
theme: 'defaultTheme'
});
console.log('html: '+n.options.id);
setTimeout(function() {
$.noty.closeAll();
}, 5000);
}
});
Get rid of the console.log() statement. IE < 9 chokes on it and 9 only works if the console is open.
Try adding an event parameter in your click callback
$('.addtobag').on('click', function(event){
A couple things that might be tolerated in some browsers and not IE are that line 12 is missing a semicolon at the end, and the variable phpbasket is not defined (although if you defined it outside of the closure with 'var phpbasket' then you should be ok. If you debug it in IE 9 or higher, you should be able to see line numbers of errors in the console.
Not a complete answer, but it may point you in the right direction. I was actually about to ask a similar question - I found how to get IE 11 to load the jquery, but it required the user to hit "f12" and then "run activex" because apparently IE considered my code potentially unsafe. But when the user tells the activex to run, it works fine.
I am trying to learn how to use jquery to make touchscreen-friendly dropdown menus, so my code was basic - no css, no doctype, just basic html and js. If anyone else could shed some light on this it would be great.
I have a web application that allows users to enter search criteria and the results get appended to a portlet container right below the input fields for the search criteria (mentioned above).
Environment - JSP, JAVA, and TAG libraries
The search page essentially consists of a few JSP pages which reference a myriad tag libraries.
After the search results are returned (AJAX) - the portlet iframe should re-size based on the new height. A JavaScript method (resident to one of the tag libraries) called setContainerHeight is what does this re-sizing.
The problem -
Internet Explorer does not call my JS method which does this re-size!
I suspect that the following post could help with this problem.
Javascript IE Event
Chrome, Firefox, Opera....all do!
Since I cannot explicitly tell the page to refresh (I will loose my search criteria parameters), nor can I explicitly check what type of browser is making the request (my JavaScript is not getting called); how can I explicitly tell the page to call my resize method after the callback?
In case anyone was curious - this is my re-size method:
function setContainerHeight() {
//reset the height to shrink the scroll height for the usecase where the portlet's contents got smaller.
getPortlet().style.height = '${frameHeight}px';
getPortlet().height = '${frameHeight}px';
try {
height = getFrameHeight(getPortlet());
} catch (e) {
//fallback for crossdomain permission problems.
height = '${frameHeight}';
}
//set the portlet & portlet container to be the same height - not using 100% for the portlet to avoid the inner scrollbar
try {
getPortletContainer().style.height = height + 'px';
} catch ( ex ) {
// do nothing, we can't get to the container
}
getPortlet().style.height = (height + getHorScrollBarHeight()) + 'px';
getPortlet().height = (height + getHorScrollBarHeight()) + 'px';
}
And this is the section of the code that calls this method -
/* resizes the portlet container to fit the size of the porlet. */
function resizePortletContainer() {
if (hasContainerHeightChanged()) {
saveScrollPosition();
setContainerHeight();
restoreScrollPosition();
}
//width handling needs some work
//if (hasContainerWidthChanged()) {
//setContainerWidth();
//}
}
//registering event handlers...
var frame = getPortlet();
var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
frame.onload = function () {prevPortletLoadEvent(); resizePortletContainer(); };
var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
var onresize = function () {prevPortletResizeEvent(); resizePortletContainer(); };
A bit more information -
After placing alert statements after the register event handler code above; I noticed that both IE and Firefox called this portion of code only ONCE (my alert box was triggered only once in either case when the initial search screen was displayed to the browser.) Thus, that leads me to believe that for some reason, only Firefox likes the above code that I am using to register my events; IE perhaps is looking for a different method of registering this event?
I suspect that the following post could be useful in my search for the answer to this problem --
Javascript IE Event
I found my answer in another post, but essentially the problem was that Internet Explorer registers its iframe events differently than all other browsers.
Also a good post for you to look at - iframe behaviour of onload vs addEventListener('load')
The code that I used to fix the problem is listed below. I hope this helps someone else that gets into a similar problem I had.
I had to do a simple check on what browser was making the request and the 2 conditional blocks that you see below do the same thing, except the syntax is different for IE. Good 'ol IE. LoL.
//Microsoft Internet Explorer Browser - iFrame event register
if (navigator.appName.indexOf("Microsoft") != -1) {
var frame = getPortlet();
var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
var refresh = function() { prevPortletLoadEvent(); resizePortletContainer(); };
if(frame.attachEvent) frame.attachEvent('onload', refresh);
else frame.addEventListener('load', refresh, false);
}
//All other major browsers - iFrame event register
else {
var frame = getPortlet();
var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
frame.onload = function () {prevPortletLoadEvent(); resizePortletContainer(); };
var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
var onresize = function () {prevPortletResizeEvent(); resizePortletContainer(); };
}
Okay, here goes. Stack Overflow virgin here but hopefully you guys will be able to help me.
I have been playing around with resizing the height of an iframe based on it's content. The content varies as a user will progress through a series of forms, this means that each submit will result in a new form of which there are 3 forms.
The code below is called when the iframe loads,
function checkHeight() {
var frame=document.getElementById('frame');
var doc=frame.contentWindow.document;
var data=doc.getElementById('data');
alert(data);
var data_height=data.offsetHeight;
if(data_height) {
frame.style.height=data_height + 'px';
alert('height has been set');
}
}
This is working fine on both mac and pc versions of Mozilla, IE and Safari but I am having a massive issue with chrome. It is not returning a document within the frame. Is this a permissions error or what?!
I have also tried contentDocument but to no avail.
All the documents reside on my server and are all within the same folder.
Thanks in advance.
Edit:
I've re-read your question - would it be simpler to just calculate the height inside the iframe's document and call the parent resizing function since they are in the same security sandbox (i.e. on the same domain)?
Original:
Since a somewhat similar thing happens when the iframes are embedded from a different domain (cannot access iframe..document) I'd speculate this approach would work:
First: calculate the document height in the document itself (i.e. inside the iframe).
Pass the values to the parent using window.postMessage/hash polling for older browsers. There is a neat library that takes care of compatibility for you.
Receive the value in the parent and resize the iframe accordingly.
Again, this may be overkill, but given that the solution has been tested to do exactly what you're after between different security sandboxes, this should also be the case for a simpler scenario if iframes are on the same domain.
That being said, if they are on the same domain (as opposed to widgets/non-mashable third party content) is there really need for an iframe? Sounds like it's just a matter of setting up jQuery to make ajax requests and populate container(s) with new data.
this seems like a fairly straight forward question so i'm not sure why such strange answers, so maybe i missed the boat entirely on this one, but here are my solutions, one is x-domain and the other isn't (note: the open/write/close, is just there to simulate server interaction to make it more obvious what's going on...)
first x-domain style:
// METHOD #1: postMessage() x-domain (chrome, ff, ie8+, safari, etc)
var d = document,
iframe = d.createElement('iframe');
iframe.height = 0;
d.getElementsByTagName('body')[0].appendChild(iframe);
window.onmessage = function(msg) {
iframe.height = parseInt(msg.data, 10);
};
var fd = iframe.contentDocument || iframe.contentWindow.document;
fd.open();
fd.write('<!DOCTYPE ht' + 'ml><ht' + 'ml><he' +
'ad><scri' + 'pt>' +
'window.onload = function(){' +
'var db = document.body,' +
'de = document.documentElement;' +
'window.parent.postMessage(' +
'Math.max(db.scrollHeight, de.scrollHeight, db.offsetHeight, de.offsetHeight, db.clientHeight, de.clientHeight),' +
'"*"' +
');' +
'};</scr' + 'ipt></he' + 'ad><bo' +
'dy style="background:#afa"><div style="border:s' +
'olid 1px black;padding:50px;line-height:50px">method #1: x-domain<b' +
'r />test<br />test</div></bo' + 'dy></ht' +
'ml>');
fd.close();
next more compatible same domain version:
// METHOD #2: manually same-domain (all browsers? [with tweaks] )
var iframe2 = d.createElement('iframe');
iframe2.height = 0;
iframe2.onload = function() {
var xfd = iframe2.contentDocument || iframe2.contentWindow.document,
db = xfd.body,
de = xfd.documentElement;
iframe2.height = Math.max(db.scrollHeight, de.scrollHeight, db.offsetHeight, de.offsetHeight, db.clientHeight, de.clientHeight);
};
d.getElementsByTagName('body')[0].appendChild(iframe2);
fd = iframe2.contentDocument || iframe2.contentWindow.document;
fd.open();
fd.write('<!DOCTYPE ht' + 'ml><ht' + 'ml><he' +
'ad></he' + 'ad><bo' +
'dy style="background:#aaf"><div style="padding:50px;line-height:50px;border:s' +
'olid 1px black;">method #2: same domain<b' +
'r />test2<br />test2</div></bo' + 'dy></ht' +
'ml>');
fd.close();
you can see it in action here: http://jsbin.com/ifevad
i hope this helps -ck
This very same example worked for me, in Chrome 17, on Windows, with the given html files:
index.html:
<html>
<head>
</head>
<body>
<iframe src="index2.html" id="test">
</iframe>
</body>
</html>
index2.html
<html>
<head>
</head>
<body>
<div id="test_div">
Ohai
</div>
</body>
</html>
Then I used this in the chrome developer window:
i = document.getElementById('test')
doc = i.contentWindow.document
data=doc.getElementById('test_div');
i.style.height = data.offsetHeight + 'px'
The only catch was that it didn't work when opening the .html files directly - I had to start a web server.
I used this (it's the default Python server):
server.py
import SimpleHTTPServer
import SocketServer
PORT = 8080
Handler = SimpleHTTPServer.SimpleHTTPRequestHandler
httpd = SocketServer.TCPServer(("", PORT), Handler)
print "serving at port", PORT
httpd.serve_forever()