JavaScript Error occured with JSONP in bookmarklet - javascript

The following Error occured in FireBug Firefox3.5.2
Failed to load source for: http://example.com/
My bookmarklet is
javascript:(
function(){
window.callback = function(d){alert(d)};
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("charset", "UTF-8");
script.setAttribute("id", (new Date()).getTime());
script.src="http://example.com/api/function.php?callback=window.callback";
document.body.appendChild(script);
}
)();
callback is:
window.cb && window.cb({"key":"value"});
What's wrong?

If you're really loading from a PHP page, I would make sure that page is returning a text/javascript MIME type.

Related

javascript script src error 404 Not Found

I'm doing something with .net core.
I have some jquery code that I use in almost every page and I want to set that specific code in one file and reuse it in others.
That common code has function that shoudl be called from others files.
Exactly I have some function for my modal pop up.
But I'm getting this error in browser "Failed to load resource: the server responded with a status of 404 (Not Found)"
My question is similar as on this link, but replies didnt help me
How to add jQuery in JS file
My code in VS
#*<script src="~/js/Event/OverViewNew.js"></script>
When I put all code in one file this works*#
$(document).ready(function () {
var script = document.createElement('script');
script.src = "~/wwwroot/js/Event/OverViewNew.js"; //doesn't work
//script.src = "~/js/Event/OverViewNew.js"; doesnt work
script.type = 'text/javascript';
document.head.appendChild(script);
//document.getElementsByTagName('head')[0].appendChild(script);
var script2 = document.createElement('script');
script2.src = '~/wwwroot/js/Helper/Modal.js'; //doesn't work
//script2.src = '~/js/Helper/Modal.js'; //doesn't work
script2.type = 'text/javascript';
document.head.appendChild(script2);
//document.getElementsByTagName('head')[1].appendChild(script2);
});

JSONP request error

I'm trying to make a request to this url:
https://en.wikipedia.org/w/api.php?action=opensearch&search=apple&limit=5&namespace=0&format=json
...using JSONP.
The function I'm using to make this request is
<script>
function foo(data)
{
var obj = JSON.parse(data);
console.log(obj);
}
var script = document.createElement('script');
script.src = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=apple&limit=5&namespace=0&format=jsonp?callback=foo'
document.getElementsByTagName('head')[0].appendChild(script);
// or document.head.appendChild(script) in modern browsers
</script>
When I load this function in google chrome I get
Refused to execute script from 'https://en.wikipedia.org/w/api.php?action=opensearch&search=apple&limit=5&namespace=0&format=jsonp?callback=foo' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
... in the console. How do I execute this request? Thanks!!!
Try changing the src URL to the following:
https://en.wikipedia.org/w/api.php?action=opensearch&search=apple&limit=5&namespace=0&format=json&callback=foo
This should cause the API to send the appropriate JSONP response you are looking for.
EDIT - Now with working code.
function foo(data)
{
console.log(data[0]);
}
var script = document.createElement('script');
script.src = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=apple&limit=5&namespace=0&format=json&callback=foo'
document.getElementsByTagName('head')[0].appendChild(script);
// or document.head.appendChild(script) in modern browsers

Get JS script source when loading from 307 redirected source

Case is that:
My script inserts <script> in <head>, pointing to src1.
The back-end does 307 redirect from src1 to src2.
Script then loads src2.
But when I use this code, I'm getting src1.
var s = document.createElement("SCRIPT"),
h = document.getElementsByTagName("HEAD")[0];
s.charset = "UTF-8";
s.src = url;
s.async = true;
s.type = "text/javascript";
h.appendChild(s);
s.onload = function() {
console.log(this.src)
}
How can I get the src2?
this.src is the src url you have set on your script tag, what you get back is the source from the temporarily redirected (307) script.
If you visit the src1 url and copy the redirect url from the response using fiddler or dev tools on your browser, you can set the that url directly in your code.

JS Asynchron script faild to execute

I want to include an adserver js script with javascript and load it async. But every try ends with an warning and the script isn't executed.
I get the following error message:
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
I have tried to following variants:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
Or I used the HTML Script attribute async
<script src="http://example.com/test.js" async></script>
But nothing worked, since the external script uses document.write. Is there another way to include such scripts?
How to "explicitly open" a page ("unless it is explicitly opened" - see warning)?
One way would be to overwrite document.write temporarily until the script is executed, afterwards replace original functionality.
var tempDocWrite = document.write;
document.write = function(el){
var div = document.createElement('div');
div.innerHTML = el;
document.body.appendChild(div)
}
var script = document.createElement('script');
script.onload = function(){
document.write = tempDocWrite
}
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
note: have not tested the above code

How to find a file is available on server in jQuery?

I am trying to load a java script file from another server to my web page using java script code document.write method. like,
document.write("<script type='text/javascript' src='http://www.mydomain.com/js/myscript.js'></script>");
But the respective path does not has the myscript.js so its throw 404 File not found error in browser error console.
How can I predict and avoid this kind of errors?
If possible to predict the error, I will display alternative message instead of calling missed js file functions.
Use JavaScript to load script:
function onReadyState() {
console.error("Unable to load file: "+ this.src + ". Please check the file name and parh.");
return false;
}
function addJS(path){
var e = document.createElement("script");
e.onerror = onReadyState;
e.src = path;
e.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(e);
}
addJS('http://www.mydomain.com/js/myscript.js');
Try jQuery.getScript( url [, success(script, textStatus, jqXHR)] ) - you can set success and error handlers in it.
If the file requested is in your domain (as it seems from the question) just do a previous ajax call (with HEAD method) of that resource and check if the response status is 200 (ok) or 304 (Not modified)
try this approach
var js="ajax/test.js";
$.getScript(js) .done(function(script, textStatus) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = js;
document.body.appendChild(script);;
})
for more details: jQuery.getScript
Please note: Use javascript (not jQuery) to manipulate HTML DOM

Categories

Resources