Executing Javascript code from a specified web address

Question

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet:

document.getElementById('ImgID1').style.verticalAlign =

However, the value by which I need to shift the image is provided through a URL (the URL is given below for reference), where if I were to run the contents of the URL as JavaScript, the output would be "-8px", which is exactly what I need. But how can I implement this? How do I express

verticalAlign={retrieve the URL content, execute as JS, extract the returned value}

.

The specific URL in question is http://latex.codecogs.com/gif.json?\inline%20\mathbb{R}

Here is a sample response that may shed some light on how to approach this:

ParseEqn({ "latex": { "type":"gif", "equation":"\\mathbb{R}", "site":"stackoverflow.com", "file":"f3ed131812d10a06a9349ab2b42e3ed4.gif", "url":"http://www.codecogs.com/eq/f3/f3ed131812d10a06a9349ab2b42e3ed4.gif", "width":"12", "height":"12", "baseline":"1" } });

Your insights would be greatly appreciated!

Sincerely,
Sam

javascript css json dom vertical-alignment

Answer 1

Answer №1

Check out the code snippet below to receive a response from the server. Make sure to open the console to confirm.

JSFIDDLE : Using JQUERY

window.ParseEqn = function(data) {
alert(data.latex.type);
}

$.ajax({
    url: 'http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D',
    crossDomain: true,

    contentType: "application/json; charset=utf-8",
    dataType: 'jsonp',
    headers: {"Access-Control-Allow-Origin": '*'
             },  
})

Using pure JavaScript: suggested solution by Blue skies

window.ParseEqn = function(data) {
    alert(data.latex.width);
}

var s = document.createElement("script")
s.src = "http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D";
s.onload = function() {
    document.body.removeChild(s);
};
document.body.appendChild(s);

Answer 2

Check out the code snippet below to receive a response from the server. Make sure to open the console to confirm.

JSFIDDLE : Using JQUERY

window.ParseEqn = function(data) {
alert(data.latex.type);
}

$.ajax({
    url: 'http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D',
    crossDomain: true,

    contentType: "application/json; charset=utf-8",
    dataType: 'jsonp',
    headers: {"Access-Control-Allow-Origin": '*'
             },  
})

Using pure JavaScript: suggested solution by Blue skies

window.ParseEqn = function(data) {
    alert(data.latex.width);
}

var s = document.createElement("script")
s.src = "http://latex.codecogs.com/gif.json?%5Cinline%20%5Cmathbb%7BR%7D";
s.onload = function() {
    document.body.removeChild(s);
};
document.body.appendChild(s);

Answer 3

Answer №2

If you want to fetch a JSON file using AJAX, you can do that by following these steps:

$.getJSON('gif.json', function(data) {

However, keep in mind that simply specifying the URL in the function may not automatically trigger the download and processing.

var image = document.createElement("IMG")

Add the image to your webpage like this:

document.body.appendChild(image); 
    $.getJSON('<a href="http://latex.codecogs.com/gif.json" rel="nofollow">http://latex.codecogs.com/gif.json</a>?\inline%20\mathbb{R}', function(data) {
          var items = [];

      $.each(data, function(key, val) {
        if(key=="url")
        image.src=value;
        else if (key="width")
        image.style.width=value;
        else if (key="heigth")
        image.style.heigth=value;
              });
    document.getElementById("yourdive's case").appendChild(image);
    });

Hopefully, this is what you were looking for!

Answer 4

If you want to fetch a JSON file using AJAX, you can do that by following these steps:

$.getJSON('gif.json', function(data) {

However, keep in mind that simply specifying the URL in the function may not automatically trigger the download and processing.

var image = document.createElement("IMG")

Add the image to your webpage like this:

document.body.appendChild(image); 
    $.getJSON('<a href="http://latex.codecogs.com/gif.json" rel="nofollow">http://latex.codecogs.com/gif.json</a>?\inline%20\mathbb{R}', function(data) {
          var items = [];

      $.each(data, function(key, val) {
        if(key=="url")
        image.src=value;
        else if (key="width")
        image.style.width=value;
        else if (key="heigth")
        image.style.heigth=value;
              });
    document.getElementById("yourdive's case").appendChild(image);
    });

Hopefully, this is what you were looking for!

Executing Javascript code from a specified web address

Answer №1

Answer №2

Similar questions

What is the meaning of this CSS acronym?

"Utilizing long-polling techniques for cross-subdomain AJAX requests

Displaying two images side by side in HTML using Bootstrap

Is it possible to transfer files using web-bluetooth technology?

Tips for testing a custom prompt that mandates a user to choose an option in the Bot Framework

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

Converting Uniquely Designed Photoshop Shapes into HTML

What is preventing me from using memoization in the getServerSideProps of NextJS?

Customizing React components based on API data

Trouble with triggering HTML5 FileReader() functions

Customized settings saved in local storage using JavaScript

Is there a way to determine if a user has the ability to navigate forward in Next.js?

JS implementing a listener to modify a Google Map from a separate class

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

display the hidden box contents when clicking the button within a PHP loop

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Utilizing headless Chrome to automatically capture AJAX requests

What is the best way to transfer my json file to the server?

Using ThreeJS to Apply Dual Materials to a Mesh Entity

AngularJS directive error: Incorrect function invoked