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
Related
I'm using JSONP, without jquery, by doing something like this:
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = url;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
Where url is for calling my server. Is it possible to return error response (for example, 403) with a message to display, and display it?
I was able to catch the existence of an error by defining:
scriptElement.onerror = function (event) {
...;
};
But this way I'm not able to see the message got from the server.
I can't use jquery so I can't use $.ajax.fail.
Thanks!
I am trying to load an external script into my react file, and it is saying: refused to execute script from 'whereMyScriptIs" because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
How can I change the type to make it text/javascript? I have put the code below where I included the script. Any help would be appreciated!
componentDidMount () {
const script = document.createElement("script");
script.src = "./live_w_locator.js";
script.async = true;
script.type = "text/javascript";
document.body.appendChild(script);
}
You should not include external javascript files like this. Instead you could simply add a import './live_w_locator' to the top of your file.
text/javascript is obsolete
application/javascript is the current official MIME type for JS
Instead of script.type = "text/javascript" you need to make sure script type is application/javascript
componentDidMount () {
const script = document.createElement("script");
script.src = "./live_w_locator.js";
script.async = true;
script.type = "application/javascript"; // notice the change here
document.body.appendChild(script);
You can read more about Media Types on Iana.org
var _body = document.getElementsByTagName('body')[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = "http://someurl.com?param1=one"
_body.appendChild(newScript);
My Question is
Is there a way to store the respose for this simple http request ?
(Like we have httpRequest.onreadystatechange if we are using ajax)
There is no way to directly access the source code of an externally loaded JavaScript from within JavaScript.
You could (cross-origin rules permissions) request the script with XMLHttpRequest, or the script loaded might include code that exposes the relevant data in a global variable (or passes the data to a callback function you provide).
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
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.