I am tasked to rewrite Javascript code built from the year 2000 because it only works in an IE browser. It needs to work in all browsers.
Obviously this was well before AJAX and they used framesets (not even iframe yet) to execute remote JSP/servlet calls into an HTML frame. These frames don't display any HTML other than the main frame. Then you need to make sure you update the code references to know which code to execute from which frame. The frames are a headache, but I have gotten these calls to work in all browsers except Safari.
$('frame[name="RegtypeFrame"]', window.parent.document).attr("src", url);
From there, I am going to the top most document to find the specific frame to load. The url variable is a JSP page that has javascript created by Java scriptlets. Nightmare, yes, but I don't have time/approval to re-write from scratch.
I have tried window.top in Safari but no luck. The code does not execute at all in Safari. I have also tried bypassing the frames altogether by using an AJAX GET, which works in all browsers, but since it is javascript I have to use eval which is a valid security risk.
$.ajax(
{
url: url,
method: "GET",
async: true,
dataType: "html"
}).done(
function(html)
{
// major security risk to use eval on remote javascript code
var dom = $(jQuery.trim(html));
dom.filter('script').each(function()
{
$.globalEval(this.text || this.textContent || this.innerHTML || '');
});
}).fail(
function(jqXHR, textStatus)
{
alert("Request failed: " + textStatus);
});
Does anyone have any suggestions or alternatives on how to resolve this issue? I have a workaround but it is a flawed security risk.
The original code seems to be working in Safari now, though I'm not sure of the reason why. I cleared the developer cache on previous attempts. Maybe there are other caches I'm not aware of. If you attempt to select the frame by id, it won't work for a non-iframe.
$('frame[name="RegtypeFrame"]', window.parent.document).attr("src", url);
Related
i am trying to open window.open a page in ajax call response but its not work, but when i removed window.open line and uncomment alert then alert is working.
$.ajax({
url: "/xyz/xyxkk",
type: 'Get',
success: function (resp) {
window.open("https://www.w3schools.com");
//alert('hi');
if (resp) {
}
else {
alert('Sorry unable to do');
}
}
});
actually my requirement is page open as window popup
Comment would fit better but not enough reputation, sorry.
Due to the ever lasting battles between browsers and intrusive ads, all js functions that can open new tabs or windows have been severely limited for a long time now. You can't just randomly open new pages or windows.
Generally you can get around this, by 'associating' the window.open to a click event or similar user input. Else your solutions will probably break in the future, even if you get it working for the moment.
Try calling different elements of your code with a .onclick() to see what is allowed. Don't forget to check at least Chrome and Firefox, and also try a few adblockers. If your solution works reliably under all of those you should be good for future adwars to come.
I have a fairly complicated page built using JSP, JavaScript, jQuery, and css. It works fine in Chrome, Firefox, and IE10. However, it doesn't work in IE8 - JavaScript specific to that particular page doesn't load, the HTML is broken, some css is loaded, but not all.
The page called via an AJAX call:
jQuery.ajax({
url : url,
dataType: "html",
cache : false,
beforeSend : ...
Capturing network activity in Developer tools shows that the relevant script files have started to arrive, but only 155B-157B were received. Result code is 304, time is shown as under 1ms.
Same reporting for Chrome shows that the same JS files are 3-7-12KB in size, took 3-10ms to arrive, with HTTP code 200.
The same page requested via a regular GET request loads normally.
The problem looks like a known aggressive-caching issue in IE8, but somehow setting cache : false doesn't prevent 304 from happening.
How can I make this work?
Using jQuery version 1.4.2, IE8 on Win7. tc Developer server 2.8.2.
One of the JavaScript files being retrieved via the AJAX call contained, among other code, this method:
jQuery(document).ready(function() {
return validate...();
}
IE8 was not able to process it, and discarded all surrounding JavaScript.
I removed the lines above, and moved the validation method to the function that was called on Complete: of that AJAX call, and everything started working.
I've got everything working, but after adding an external javascript file (which is, by the way, only a couple of short lines in length), it delays loading of the popup.html.
This delay is annoying, and I think by asynchronously loading the javascript file, then it will get rid of this lag.
The file is written in popup.html like this:
<script src="https://domain.com/myexternalscript.js"></script>
I'm not sure how to asynchronously load this file. So how can I do this?
Since you are developing for Chrome, I do understand the problem with inlining a script before load.
I wrote this AJAX(jQuery) snippet, hope you'll find it usefull:
$.ajax({
type: "GET", //or post?
url: "http://FOOBAR.COM", //change the url obviously..
datatype: "script", //identify the expected income
async: "true", //async is "true" by default, but let's make sure it's #t
success: function(result) {
/**now we append the script to the document, nothing too special,
just pay attention we inject it INSIDE the item and not as the src**/
var scr = document.createElement('script');
scr.innerHTML = result;
document.body.appendChild(scr)
},
error: function(result) {
//a simple error handling using the same method we used for the success
console.log(result)
var scr = document.createElement('script');
scr.innerHTML = "alert('ERROR!')";
document.body.appendChild(scr)
}
});
There are two solutions:
Move the script tag to the end of the html page.
Use the defer attribute on the script tag, which, however, is not supported by older browsers.
The delay could be because the source is a secure http (https) request, instead of just a plain-vanilla http request. Depending on your particular hosting plan, this may or may not make a difference. Arguments and evidence have been made and presented to support this notion and the contrary.
I don't think loading the file asynchronously will solve your problem, because you would be making the same http request... which is what AJAX does; It allows us to request information from the server without reloading the page.
If it's just a couple lines of JS, then why not just include it in your .html document?
Also, you haven't described issue that you are encountering very well. Perhaps you can elaborate?
My situation is, I'm developing a little web app where the server provides dynamic JSON responses. The server is built on cherrypy. Sometimes, there is a bug in the code creating the JSON data, which throws, and cherrypy catches it and serves back a 500-error with a full HTML page detailing the exception. (That is, the response has everything: <!doctype..><html><head>...</head><body>...</body></html>)
But because the request is AJAX, it doesn't get displayed.
I can intercept this error easily enough, and look at it in the dev tools; but what I'd like to do (to ease debugging) is open a new page (as if user had followed a link) and display that response in the browser. I tried
window.open('', '_self');
$(document).html(jqXHR.responseText);
but I just get a blank page. I suppose I could store the error text and serve it up in a second request to the server, but is there a cleaner way?
To follow up, the final code that worked was this:
.error(function(jqXHR, textStatus, errorThrown) {
$(window).bind('unload', function() { document.write(jqXHR.responseText); } );
var win = window.open('', '_self');
return false;
});
Not sure if that final return false is necessary but it seems good form.
Following up again: the above code worked reliably in Opera. I thought I had seen it working in Webkit as well, but I started noticing that it wasn't; and on further testing, it wasn't working for Firefox either.
What I found that worked in all three platforms was this:
document.open('text/html', true);
document.write(jqXHR.responseText);
document.close();
Don't have to open another window or bind events; just re-open the document and stuff the text in there.
Well, here I am again. The above technique either stopped working or I was tripping when I said it ever worked at all. Chrome, in particular, doesn't seem to have document.open defined.
But! I just found a nifty technique that seems to work everywhere:
errtext = 'data:text/html;base64,' + window.btoa(jqXHR.responseText);
window.open(errtext, '_self');
This simply converts the response into a fully self-contained data: URL and opens it in the window.
Try this:
var win = window.open('', '_self');
win.document.getElementsByTagName('Body')[0].innerText = jqXHR.responseText;
Here I am, with another problem. :) Maybe this time I'll get some responses. :P I'm using jquery.form.js plugin, to process forms with file fields. It's simple implementation.
$this.ajaxSubmit({
data: { 'ajax' : 'true' },
dataType: 'html',
success: parseRsp,
error: parseErr
});
It works on Chrome, Opera and new Firefoxes. It doesnt on Firefox 3.x and all versions of IE. Plugin throws some Server abort problem, but after some changes in code to debug it, I get it. Function getDoc(iframe) throws Permission denied in IE. But why? It's not cross-domain or something? I even add <script>document.domain = 'mydomain.com';</script> but that doesn't work either. Any ideas?
BTW. we are using APE Project. It probably makes some document.domain modifications, but on Chrome console, on page where is form, when I type document.domain i'm still getting mydomain.com, so...
I had a similar issue just now.
The problem was that I was setting the document.domain property in the parent document. The api document that is inside the iframe is vanilla json, and, as such, has no opportunity of setting a document.domain. Hence the permission issue.
So I had to remove the document.domain assignment from the parent.