I'm trying to nest html5 to react native by using webview, but it seems like I can't trigger the css and js file, my react native js code:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
export default Game = () => {
return (
<WebView
originWhitelist={['*']}
source={require('./index.html')}
style={styles.container}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 300,
paddingTop: 500,
},
});
my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css">
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p>View source code on GitHub</p>
<script src="./15-puzzle.js"></script>
I just can't trigger the css and js code in html, does webview support it?
This way is not working for WebView.
you must create a file or a string for html content like this:
For example create file rawHTML:
export const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css">
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p>View source code on GitHub</p>
<script src="./15-puzzle.js"></script>
</body>
</head>
`
and then import this in js file like this:
import {html} from './rawHTML';
and change WebView source to source={{html: html}}
Related
I'm trying to use Ktor to create a back end for a simple site. I can not find any documentation or examples on how to do anything that is not absolutely basic.
E.g. all I want to do at this stage is:
have a template evaluated by FreeMarker (or any other method) to create a Html
page that is styled using a css sheet that I have, and refer to an image that I have.
I can not get it to find/use the css or the image.
my code:
index.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<header>
<div">
Hello
</div>
</header>
<body>
<div>
<h1>H1 1</h1>
<img src="/resources/imgs/Logo_cropped.jpg" alt="1">
<img src="resources/imgs/Logo_cropped.jpg" alt="2">
<img src="/imgs/Logo_cropped.jpg" alt="3">
<img src="imgs/Logo_cropped.jpg" alt="4">
<img src="/Logo_cropped.jpg" alt="5">
<img src="Logo_cropped.jpg" alt="6">
<h1>H1 2</h1>
</body>
</html>
Routing.kt
package com.example.plugins
import io.ktor.server.routing.*
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.request.*
fun Application.configureRouting() {
routing {
get("/") {
call.respondText("Hello World!")
}
get("/h") {
call.respond(FreeMarkerContent("index.ftl", mapOf("data" to stam("John", 15)), ""))
}
}
}
data class stam(val name: String, val age: Int)
I am trying to render an html page in react. I have tried multiple solutions but still, I am getting an error. Yes I know there are many questions similar to this one but none of those solutions has worked for me. I am using reactjs as front-end and simply trying to show a static html page.
html file is below:
<!DOCTYPE html>
<html>
<head>
<title>Ably WebRTC Video call Demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
</head>
<body>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js"></script>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"></script>
<script src="ably-screenshare.js"></script>
<script src="connection-helper.js"></script>
<div class="container-fluid" style="margin-top: 5em;">
<div class="container" id="join">
<h4 id="online">Users online (0)</h4>
<ul id="memberList"></ul>
</div>
<div class="container" id="call" style="display:none;">
<video width="320" height="240" id="local" controls></video>
<video width="320" height="240" id="remote" controls></video>
<button class="btn btn-xs btn-danger" onclick="handleEndCall()">
End call
</button>
</div>
</div>
</body>
<style>
small {
border-bottom: 2px solid black;
}
li {
list-style: none;
}
</style>
</html>
and the solution that I tried is
import React, { Component } from "react";
var __html = require("./screen.html");
var template = { __html: __html };
class ScreenShare extends Component {
render() {
return (
<div className="screen-share">
<span dangerouslySetInnerHTML={template} />
</div>
);
}
}
export default ScreenShare;
Even using the above solution, I am getting this error
./src/components/screenShare/screen.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
|
| <html>
is there something wrong that I am doing? I know dangerouslySetInnerHTML is not the best way to solve the issue but I tried to change the above html code into react component and it didn't help. So I tried dangerouslySetInnerHTML to convert it but it is still giving error.
By default, importing an HTML file with react will not work. Given your use case and the route which you want to go, the best bet will be to convert the HTML page to a js file and then export for example:
html.js file
module.exports = `<!DOCTYPE html>
<html>
<head>
<title>Ably WebRTC Video call Demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
</head>
<body>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js"></script>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"></script>
<script src="ably-screenshare.js"></script>
<script src="connection-helper.js"></script>
<div class="container-fluid" style="margin-top: 5em;">
<div class="container" id="join">
<h4 id="online">Users online (0)</h4>
<ul id="memberList"></ul>
</div>
<div class="container" id="call" style="display:none;">
<video width="320" height="240" id="local" controls></video>
<video width="320" height="240" id="remote" controls></video>
<button class="btn btn-xs btn-danger" onclick="handleEndCall()">
End call
</button>
</div>
</div>
</body>
<style>
small {
border-bottom: 2px solid black;
}
li {
list-style: none;
}
</style>
</html>`;
Here, note the module.exports, as well as the template string used, so you can call it in your react page this way:
import React, { Component } from "react";
var __html = require('./index.html.js');
var template = { __html: __html };
class ScreenShare extends Component {
render() {
return (
<div className="screen-share">
<span dangerouslySetInnerHTML={template} />
</div>
);
}
}
export default ScreenShare;
Put your static file in the public folder then in your routing section put this:
<Route exact path="/">
<Redirect push to={"/home.html"} />
</Route>
You can convert your HTML static file to string and pass it to your div with dangerouslySetInnerHTML tag.
Then if you have a problem again, in this case, your HTML file might have a field that is not defined or not true.
Check your HTML and try again.
Here is the html code
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Started: Serving Web Content</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import vue-resource -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" :style="backgroudcolor"></div>
</body>
and I supposed to set background for the div whose id is 'app' ,and I've tried to bind a style object to its style, but it didn't at all..
here is the definition of the style object:
backgroudcolor: {
backgroundColor: 'red'
}
by the way, I put it in data.
Please help me, I'll be very grateful for that!
Use the right css property name background-color:
new Vue({
el: "#app",
data() {
return {
backgroudcolor: {
'background-color': 'red'
}
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app":style="backgroudcolor">
test
</div>
I am trying to redirect to home.html on click of a button in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Index</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="LoginCtrl">
<button ng-click="login()">Login</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
home.js
var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {
$scope.login = function(){
$location.path("#/home.html");
};
}]);
And here is the hierarchy of both files
$location.path() is not working. Where am I going wrong? TIA.
take a look here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
but the simple answer is that you should set up routes
$stateProvider.state('app', {
url: '',
templateUrl: 'app.html',
controller: 'AppCtrl'
}
}).state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
})
and then I would recommend using the $state provider to do something like this
login.controller('LoginCtrl', function($scope, $state) {
$state.go('app',{});
})
This is not the EXACT code, but an overview, I would recommed reading the link provided for additional information
i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!