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.
Related
Good Morning,
I hope to get help for a simple problem but that caused too much damage to me.
I'm building a video library for users where one profile can upload a video and another can play it in a browser.
The html page that diplays the video player has next code:
<!DOCTYPE html>
<html
lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout_navigation.html}">
<head>
<meta charset="UTF-8">
<title>OBR-VIDEOTHEQUE</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="styles.css"> -->
<style type="text/css">
#video-player {
display: none;
}
#video-form {
width: 60%;
}
.error {
color: red;
}
.success {
color: green;
}
</style>
</head>
<body>
<section layout:fragment="content">
<meta charset="utf-8">
<div class="container mt-1">
<h3>Video streaming1...</h3>
<video src=""
type="video/mp4" width="720" height="480" controls preload="none" id="video-screen" autoplay loop>
</video>
</div>
</section>
<section layout:fragment="footer">
<footer class="container py-5 text-center footer">
<div class="row">
<div class="col-md-12">
<p class="text-muted">©</p>
</div>
</div>
</footer>
</section>
<section layout:fragment="scripts">
<script th:src="#{/js/jQuery-min.js}"></script>
<script
type="text/javascript"
th:src="#{/js/dropdown.js}"></script>
<script th:src="#{/js/bootstrap.bundle.js}"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
<script th:src="#{/js/select2.min.js}"></script>
<script type="text/javascript">
var xyz = jQuery.url.param("id");
if (xyz) {
const videoScreen = document.querySelector('#video-screen');
videoScreen.src = "video/?id=${xyz}";
console.log(videoScreen.src);
}else{
console.log("No Id found in search url");
}
</script>
</section>
</body>
</html>
For instance, if i change <h3>Video streaming1...</h3> with <h3>Another heading text</h3>
the browser keeps showing previous content that is Video streaming1... even if i save the html changes and reload the Spring Tool Suite 4 that i'm using to develop the application.
How can I solve this headache? I have put theses lines in application.properties file:
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
thinking that no cache shall be kept but in vain.
Problem number two:
The <video src="" /> src attribute gets populated dynamically using the javascript code found on the bottom of the file but is prepending localhost before the endpoint. For instance, videoScreen.src = "video/?id=${xyz}" causes the src attribute to get http://localhost:8087/video/?id=movie when I want it to take on video/?id=movie only. This causes browsers calling my application remotely to experience an error because localhost is going to look the video url on their local PC which is wrong.. How can I solve this problem as well?
Thanks for your help.
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}}
I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">
Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});
.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>
Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#2.0.0-alpha.45" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.
I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>
The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});
the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).
I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>
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!