I want to see how some changes in my Django app will interact with an HTML page, but I don't want to deploy them until I test.
Here's my naive attempt, which doesn't render anything inside the iframe, even though that link works in its own tab.
HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<div class="frame">
<img id="logo" src="images/Logo.png"/>
<iframe id="primaryVideo" src="http://127.0.0.1:8000/app/1/">
<p> Your browser does not support iframes. </p>
</iframe>
</body>
</html>
Cross-origin resource sharing was the problem. You can check if this affects you by checking the console or network tab.
All I had to do was add my localhost address to the ALLOWED-HOSTS field in settings.py of my Django app.
Related
So till now I always used stylesheets which are in the same folder as my website, but I want to be more flexible and work on my layout via github. So i uploaded the css file and used the raw link. I noticed that I can't use it. Is it even possible to use stylesheets from websites? I tried to find an answer on the internet but I couldn't find an article about this issue.
Here's my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Goetterescu/Website/main/styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/Goetterescu/Website/main/styles.css">
</head>
I used https://gitcdn.link/ to serve the stylesheet since Github was serving it with the wrong stylesheet
You should use this type of file path to your css file. GitHub file directories should point to the relative path of the linked file within the repository.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
I'm building a one-page application using Vue.js and Webpack for bundling the client-side (HTML, JS, all in one file).
It seems that search engines, such as Google, are having trouble indexing the content, since it's only rendered through that bundle file, and doesn't exist on the html files (attached example).
My question is - how can I make Google index my app's content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" type="text/css" href="dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="dist/build.js?1500"></script>
</body>
</html>
There's nothing fancy about the HTML, JS or CSS code. It all works fine if I embed the css inside the HTML file, but when linking to the external file it doesn't work.
Just uploaded it all to Digital Ocean, so I'm not sure if there are any special configurations I need to make to enable these external files to work.
Here's the HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>v1</h2>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
How to create the simplest possible html page which uses Polymer Paper Elements?
I would like to have a single html file which loads all reqired libraries from elsewhere (CDN). Example:
<!DOCTYPE html>
<html>
<head>
<title>Polymer Test</title>
</head>
<body>
<paper-button>hello world paper button</paper-button>
</body>
</html>
This obviously does not work, because <paper-button> is not known to browsers. So what do I have to include to make it work on all current browsers?
Is it possible without downloading any libraries myself and having to place them on my webserver beside my html file?
You can use Polygit a CDN like tools for Polymer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Simple</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<paper-button raised> Hello World!</paper-button>
</body>
</html>
Here is codepen with polygit, you can fork kit
I have the following HTML in a web directory:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
I would like something like:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='../web/lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller-stub.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='../web/my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
Note that the only differences are the .js and .css paths. If I were dealing with a language like Java, I would extract out a method and pass in the filepaths as arguments (or extract out a class and set the fields to the filepaths). How do I achieve a similar effect in HTML?
The second page is for testing the 'look' of the page. As such, allowing the page to be loaded via file:// allows for really quick turnaround. angular-controller.js does xhr stuff and fills in variables. angular-controller-stub.js just stubs those variables.