I'm building a static website which will relay only on client-side (no PHP).
I have couple of js and py files, which I would like to display on the site as a code.
I really want to avoid using jQuery and implement everything in JavaScript (lightweight as possible).
var codeToDisplay = "<object type='text/html' data='problem001.js'></object>";
document.getElementById('code').innerHTML = codeToDisplay;
This doesn't work. What are my options?
Thanks.
Use AJAX to get the contents of the file and insert it into the element. Use .textContent to prevent interpreting it as HTML.
var url = 'problem001.js';
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readystate == 4 && xhr.status == 200) {
document.getElementById('code').textContent = xhr.responseText;
}
}
xhr.open("GET", url, true);
xhr.send();
<div id="code"></div>
Related
I want to view other website source code with javascript use in my own website, i have a code, it's showing same window, i want to view other website source code, please help me i am new programmer.
Example i want show example.com to my website as source code.
function viewSource(){;
var source = "<html>";
source += document.getElementsByTagName('html')[0].innerHTMLz;
source += "</html>";
source = source.replace(/</g, "<").replace(/>/g, ">");
source = "<pre>"+source+"</pre>";
sourceWindow = window.open('','Source of page','height=800,width=800,scrollbars=1,resizable=1');
sourceWindow.document.write(source);
sourceWindow.document.close();
if(window.focus) sourceWindow.focus();
}
<button type ="button" onclick="viewSource()">View Source</button>
You could maybe try an AJAX request:
function viewSource() {
var request = new XMLHttpRequest();
request.open("GET", "someURL.com", true);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4)
alert(request.responseText);
};
}
This would send a GET request for the document at the URL, which should be the page source. Just be aware of the same origin policy.
I am working on a project where I need to extract data from an excel file stored on client side so than i can work on that data. is there any way to do it without using any other Javascript library??
you can make a simple ajax call and get the responseText
var request = new XMLHttpRequest();
request.open("GET", "https://jsonplaceholder.typicode.com/", true);
request.onreadystatechange = function ()
{
if(request.readyState === 4)
{
var content = request.responseText;
document.querySelector('#content').innerHTML = content;
}
}
request.send();
<div id="content"></div>
I have html page with script tag. In that script tag I am going to load external url, like..
<script src="http://www.test.com" />
Is it possible to read that url (http://www.test.com) header values by javascript.
Note: That script tag external url have iframe restriction.
If you are using a .js file, then it can't have Header values.
Normally you can get the Header values via JavaScript by using Ajax Request.
for example:
var url = "www.test.com";
var rh; // Response Headers
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
rh = xhr.getAllResponseHeaders();
}
}
// now rh contain all headers
//or you can make a HEAD request which return all HEADER elements of the URL
xhr.open("HEAD", url,true);
xhr.onreadystatechange=function() {
if (xhr.readyState==4) {
rh = xhr.getAllResponseHeaders();
}
}
xhr.send(null)
I want to call php in a java script
I have read that this is forbidden:
document.getElementById('id1').innerHTML="<?php include my.php?>";
if I can't do this How can I load a php page content to a div with id1 when clicking an li:
<ul>
<li onclick="javascriptFunction()">
<li>
<li>
</ul>
<div id="id1"></div>
There are two ways of achieving the goal.
It isn't so much that what you are trying to do is forbidden as much as it is simply impossible.
Option 1
Use an ajax call to your PHP code. In the callback of the ajax call, fill in the innerHTML.
Option 2
Use a template.
<script type="text/html" id="template-id1">
<?php include my.php?>
</script>
<li onclick="setDiv()">
<script>
function setDiv() {
document.getElementById('id1').innerHTML =
document.getElementById("template-id1").innerHTML;
}
</script>
You could use AJAX (http://en.wikipedia.org/wiki/Ajax).
With a usage of library like jQuery (http://api.jquery.com/jquery.ajax/) you will have code like this:
$.ajax('my.php')
.done(function(response) {
$('#id1').html(response);
})
Of course it's doable without any libraries like jQuery, but just requires a bit more code.
I don't know why that'd be forbidden. It's called bootstrapping.
But if you must:
my.php
echo 'whatever';
And then in a <script> tag, use $.ajax to call my.php and fill the appropriate element with the response.
ready function:
function javascriptFunction () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("id1").innerHTML = xhr.responseText;
}
}
xhr.open('GET', 'my.php', true);
xhr.send();
}
You need to use ajax, if you don't want to use library try this:
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("id1").innerHTML=request.responseText;
}
};
request.open("GET","my.php",true);
request.send();
Or you could hide the div, then when you click on the link then make it visible.
<div id='id1' style='display:none;'>
your content
</div>
function javascriptFunction() {
document.getElementById('id1').style.display = 'block';
}
I'm submitting a form through AJAX for the express purpose of displaying a pre-selected image. Selecting an image from the local drive will trigger the "onchange" event for the file-type input, and in turn call the AJAX routine. It works fine, and upon a successful "move_uploaded_file", the PHP handler returns the validated file name. The following illustrates how the AJAX submission was effected:
var xhr = new XMLHttpRequest();
var xForm = new FormData(document.forms.namedItem("form"));
xhr.open("POST", "handler.php", true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("imgDiv").src = xhr.responseText;
}
}
xhr.send(xForm);
Instead of getting the handler to return the file name, is there any way to access the $_POST and $_FILES variables after returning from an AJAX submission? This is usually possible when returning from a normal form post, using:
<?php echo $_POST['stringInput'];?>
<?php echo $_FILES['imageInput']['fileName'];?>
but I'm not able to get anything in this case.
Thanking you,
Sofia
EDIT: in case it may be relevant, the handler is not in the same HTML script, but in a separate PHP file. Thanks again!
Because you made a mistake in code typing here:-
Old code
x.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("imgDiv").src = xhr.responseText;
}
}
New code
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("imgDiv").src = xhr.responseText;
}
}
Means replace x.onreadystatechange with xhr.onreadystatechange