I want to fetch the data from example.com/page.html. Here is the page.html when I get it's content using Chrome Browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
<p>test 1</p>
<p>test 2</p>
<p>test 3</p>
</div>
<script src="test.js"></script>
</body>
</html>
and here is the page.html when I get it's content using Ajax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
</div>
<script src="test.js"></script>
</body>
</html>
As you can see, the paragraphs are not there!
here is the Ajax code:
$.ajax({
url: 'http://example.com/page.html',
success: function(data) {
alert(data);
}
});
I know that the paragraphs are generated using the script(test.js)and script.js is processed using Chrome JS Engine. So here is my question: How can I get the whole rendered page.html content via AJAX?
How can I get the whole rendered page.html content via AJAX?
You can't.
Ajax is just the process of making an HTTP request and getting the result using client-side JS.
You need to do things that are not Ajax.
You need to either:
Make the Ajax request and then follow it up by reproducing everything that the JS referenced by the page would do
Inject the HTML into the browser in a way that lets the JS execute and then read the DOM from the browser (this can be dangerous if the injected code ends up interacting with your page in some ways).
Build a web service which renders the page in a headless browser and then returns a serialised version of the DOM and then make an Ajax request to that web service.
Related
I'm trying to create a html form, from which the user can submit the values written in the text fields to an external api (ThingSpeak). This api works on the values received from this form and returns a plot in an iframe.
The script I've written works fine, only when the file is just opened. It fails to push the new values upon reloading and resubmitting using the same file. And the output ends up showing the last plot embedded in the iframe.
The html file containing the form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>ThingSpeak Portal</title>
</head>
<body>
<form>
<label id="1" for="signal">Enter Signal: ex - #(t)sin(t): </label><br>
<input type"text" id="signal"><br>
</form>
<button>Submit</button>
<script>
$(document).ready(function() {
$("button").click(function() {
var input = $("#signal")[0].value;
if (input!="" && input!=null) {
$.post("https://api.thingspeak.com/update.json" ,{
api_key : "XXXXXX",
field1: input},
function(){
alert("Directing to output...");
// location.reload();
window.location = "output1.html";
});
}
else {
alert("Error!");
location.reload();
}
});
});
</script>
</body>
</html>
The html file containing the output in form of an iframe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe id="plot" width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/435674"></iframe>
<script>
var iframe = document.getElementById('plot');
iframe.src = iframe.src;
</script>
</body>
</html>
It would be amazing if anyone can spot the problem and help me resolve it.
Thanks in advance!
It appears that a successful API POST request from the form page (index.html) only redirects the user to output1.html which has a plot hardcoded in the iframe:
src="https://thingspeak.com/apps/matlab_visualizations/435674"
So this output plot will always be loaded, since the src is hardcoded and never updated. Also, nothing is being done with the data returned from the successful POST request, which should contain the url to the plot if I understood the api documentation correctly.
Here is a way to access the data returned from the request:
$.post("https://api.thingspeak.com/update.json" ,{
api_key : "XXXXXX",
field1: input},
function(data){
console.log(data) // log anything returned to the console
}
);
As for displaying the new plot:
An option would be to add the iframe in index.html, where the iframe src can be automatically updated with javascript using the necessary data returned from the POST request.
If you would like to display the results in output1.html, you need a way to transfer the returned data with your request, which would be used to change the src of the iframe of that page. This should help you with that: How do I redirect to an HTML page and bring in attached data?
I have experience with Java and Python and am following along with this tutorial online (https://www.youtube.com/watch?v=W6NZfCO5SIk&t=579s) to learn Javascript. Despite copying and pasting his code (where I have a javascript file called "test.js" and a html file called "test.html", I am unable to have the "Hello world" text displaying in the browser page when it opens. (The title of the page displays correctly, but the "Hello world" text does not display in the page and there is only a blank page).
test.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<title>Today's date</title>
</head>
<body>
<script src = "test.js">
</script>
</body>
test.js:
console.log("Hello world")
just press F12 to open your console
use alert display it in browser
oh i get you i guess
try this <h1></h1>
<body>
<h1>Hello World</h1>
<script src = "test.js">
</script>
</body>
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
I have some links (like first link in below) and want to get links that is redirected to (like second one)
For example:
I have link below:
http://dx.doi.org/10.1007/146.1435-5655
And need to get this link:
http://link.springer.com/journal/146
that redirect (or converted) from first one.
When I use .load() function in jQuery it return some javascript codes that I think it get second link from dx.doi.org server.
How can I get second link? (http://link.springer.com/journal/146)
In other word, I have http://dx.doi.org/10.1007/146.1435-5655 and need only http://link.springer.com/journal/146 in string (not content of http://link.springer.com/journal/146)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="swPicForm">TODO write content</div>
<script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("#swPicForm").load("http://dx.doi.org/10.1007/146.1435-5655", null, function() {
alert($("#swPicForm").html());
});
</script>
</body>
</html>
Result is:
function (e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1></$2>");try{for(;r<i;r++)n=this[r]||{},n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),n.innerHTML=e);n=0}catch(s){}}n&&this.empty().append(e)},null,e,arguments.length)}
thanks all