I'm working on a website that is made on a samba share connected to a bunch of school computers. School computers being how they are, I have no access or way of setting up any webserver of any sort. I'm trying to make a header and footer for all of the HTML files on the website, but I can't include it by a standard jQuery ajax request pointing to a relative file path. Right now, the code looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<html lang='en'>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/libs/jquery.js"></script>
<div id="header"></div>
<script>
$.ajaxSetup({
crossOrigin: true
});
$.ajax({
url: "file://./html-templates/header.html",
data:{"id":header},
type: 'GET',
success: function(){
console.log("Added header");
}
});
</script>
</head>
<body>
</body>
</html>
The header file is currently only some text for testing:
<h2>You have successfully imported the header</h2>
This returns this error message from Firefox 63.0.3:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///html-templates/toolbar.html. (Reason: CORS request not HTTP).
Is there any way I could import HTML from separate files into a HTML file manually without having a web server do it for me?
For linux users, you can run this command
google-chrome --disable-web-security --user-data-dir="/var/tmp/Chrome dev session"
Which will disable all the security and your will pass without any issue.
NOTE : Please do this only when testing in local systems.
Chrome has disable it for security but lucky for you Firefox can do that if you are using relative URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(function () {
$.get("html-templates/header.html", function (data) {
var headerText = $(data).find('h2').text();
$('#header').text(headerText);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
the path ./ is same directory with your script you can just
url: "html-templates/header.html",
Related
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.
first-time asker here. I just started making a desktop application with electron js, and when I try to load my external stylesheet into my index.html file, it will not work. Here is my HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bundle</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" type="style.css"
href="https://raw.githubusercontent.com/AlessioToniolo/Bundle/master/style.css">
</head>
<body>
<div class="header-separation">Hello</div>
<script src="main.js"></script>
<script>
/* const electron = require('electron');
const {ipcRenderer} = electron;
ipcRenderer.send('item:add', item);
*/
// For other window:
/* previous code plus
ipcRenderer.on('item:add', (e, item) => {
})
*/
</script>
</body>
</html>
When I tried to link to my external stylesheet originally I just used a path instead of a URL but then when it didn't work I tried loading another stylesheet from a CSS framework which did work. What am I doing wrong? Thanks!
I don't think GitHub allowed that its because the CSP, you should host your CSS on other place like unpkg.com.
Here are GitHub CSP. You can look at your network tab on dev tools
default-src 'none'; style-src 'unsafe-inline'; sandbox
I think it is because used sandbox sandbox described here
and the content type of the request made was text/plain not text/css so it is not executed.
I just tried it out and I can't. First you had typo seperation on you gits, 2 it should be type="text/css"
Try setting the type="style.css" to type="text/css".
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've made an application with a PouchDB frontend that is stored as a CouchDB attachment.
I have this html page stored at localhost:5984/repository/b/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/repository/b/pouchdb.min.js" type="text/javascript"></script>
<title>practice</title>
<div id="practice">
</div>
</head>
<body>
<div id="app"></div>
<script src="/repository/b/build.js" type="text/javascript"></script>
<script src="/repository/b/store.js" type="text/javascript"></script>
</body>
</html>
Pouchdb.min.js is successfully stored at the src referenced in the head. I try to reference it in store.js:
var db = new PouchDB('http://localhost:5984/repository');
var text;
var b = document.getElementById('practice');
db.info().then(function(info) {
text=info;
}).then(function(){
b.innerHTML=text;
});
I get the error
ReferenceError: PouchDB is not defined
When I look in my debugger, in the application section of chrome, it shows that the pouchdb file contents are loaded. In the network section, all of my resources are showing 304 errors.
Can anyone guess what might be going on here?
I am developing a SPA (Single page application) using ember.js served from pyramid. The problem is that the routing is not working properly.
In pyramid, I have the following routes defined:
# Route to index.html, i.e. the SPA
config.add_route('index', '/')
# Route to css & js resources
config.add_static_view('', 'myapp:static')
And the index view is:
#view_config(route_name='index')
def index_view(request):
with open('myapp/templates/index.html', 'rt', encoding='utf-8') as fh:
html = fh.read()
return Response(html, content_type='text/html')
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/x-handlebars" data-template-name="wfw">
<section id="wfw">
<p>here is a page</p>
</section>
</script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://raw.github.com/less/less.js/master/dist/less-1.6.0.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
js/application.js:
window.Wfw = Ember.Application.create();
js/router.js:
Wfw.Router.map(function () {
this.resource('wfw', { path: '/t' });
});
When I go to localhost:6543/ I get "Hello, world!", but I don't see "here is a page". If I change the path in js/router.js to '/test' and go to localhost:6543/test, I get a 404. What am I doing wrong? Do I need to somehow disable part of pyramid's routing, or am I doing something wrong with ember?
A few things:
I think you need to move your Ember.js script tags above your application specific tags.
The path you have configured is /t so I don't think it would pick it up /test.
By default, ember doesn't use the html5 history api, so your url would need to be like: localhost:6543/#/t