I am trying to create a widget where it should be able to reuse as iframe on any other website. it works perfectly on same domain. I tried to use it on different domain.
my iframe code is below,
<iframe id="serviceFrameSend" src="https://cyberglo.com/dyacon/dyaconlive/websiteWidget.php?pid=811addd060d7ae73429a831acae7365c&size=large" width="1000" height="1000" frameborder="0"></iframe>
As I said above when I use this on different domain only part of widget is rendering, it has some Ajax request where it load the bottom part of data. when iframe is loaded on different domain that part isn't working.
But surprisingly its working perfectly on Firefox even on different domain. but no luck with chrome and safari.
Maybe its due the doctype or "Content-Security-Policy", I tried everything without any luck.
here is my header file
<?php header("Access-Control-Allow-Origin: *");
include_once 'version.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=400, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content=" default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';">
<!-- responsive meta tag -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Dyacon Weather Stations</title>
<script src="js/jquery-3.2.1.js"></script>
<script> var sid = <?php echo $stationid;?>; var globals = {};</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.structure.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.theme.min.css" type="text/css">
I have added iframe on different domain for texting here
https://noblewebdesign.com/dyacon/widgetTest.php
Your help is really appreciated.
Related
So, making an app, where using buttons you navigate around, and it works fine going from the first page to the next, however, afterwards, the buttons on the subsequent page no longer function, even though their code is identical. Is there a way to keep the chain going?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>I Have You</title>
</head>
<body>
<button id="IHY" class="buttonA">IHY</button>
<!-- <p id="info"></p> -->
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is my main html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>Home</title>
</head>
<body>
<button id="friendButton" class="buttonB">Friends</button>
<button id="settingsButton" class="buttonB">Settings</button>
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is the page the button takes you to
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>Friends</title>
</head>
<body>
<h2>Friends :D</h2>
<button id="homeButton" class="buttons">Back</button>
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is where I want the "friends" button take me to
document.getElementById("IHY").onclick = function () {
window.location.href = src="./home.html";
}
document.getElementById("friendButton").onclick = function () {
window.location.href = src="./friends.html"
};
document.getElementById("homeButton").onclick = () => {
window.location.href = src="./home.html";
};
Heres my js for the buttons
I tried looking for anything online to fix this, but it isnt quite helping me, since it's all to do with websites, though im making an app.
The problem I think you might be having is that each page is using the same script for the buttons.
Because each page uses the same script for the buttons, it's trying to load js for buttons that don't exist on certain pages.
Therefore you may be running into a script that is failing before it loads the event listeners for the existing buttons. It might be failing to register the DOM event for a button that does not exist on that page.
Without seeing any browser console errors it's a bit hard to tell at the moment, but can you try creating a different script for each page that loads the button event listeners for buttons that exist on those pages?
I'm trying to use the google designer stuff in my application made on electron.
but even installing I can't use the style of the designer material
I installed the package using
npm i material-components-web
My code is as follows:
index.html
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<title>MyTestApp</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="win">
<div>
<img src="bacground.png"/>
</div>
<div class="Panel">
<div class="Test"></div>
<mwc-textfield class="TextFiledTest" label="Test" icon="event"></mwc-textfield>
</div>
</div>
</div>
</body>
</html>
Can anyone who has used material web components in electron tell me how can I do it to work?
The default content security policy block loading of third party resources. Also, since you already installed npm module for material web components you can load them locally.
To fix this issue:
Update your content security policy header to enable loading the material icon font.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://fonts.googleapis.com"
/>
Use the scripts and styles from installed node modules:
<link
rel="stylesheet"
href="node_modules/material-components-web/dist/material-components-web.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="node_modules/material-components-web/dist/material-components-web.min.js"></script>
Also add a local CSS file to fix user agent styles with:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
* { box-sizing: border-box }
So I'm making my first Cordova app and I'm trying to create a simple login form. The thing is, when I click an input element, the keyboard pops up. For some reason this makes my whole layout change completely, while it isn't even close to being complicated.
Anyone knows why this occurs?
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src https://ikleeralles.nl:*">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<title>Hello World</title>
</head>
<body>
<div class="app-screen">
<div id="result"></div>
<form>
<label for="username">Gebruikersnaam:</label>
<input type="text" class="form-control" id="username">
<label for="password">Wachtwoord:</label>
<input type="password" class="form-control" id="password">
<button type="submit" id="submitForm" class="btn btn-default">Log in</button>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/post.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
CSS:https://pastebin.com/vDSyqHSu
I'm sure the problem is in min-aspect-ratio: 1/1. Without the keyboard, the aspect ratio is different. Change the rules inside this media query or try to delete it.
This is because on line 20, you have to actually put:
body div.app-screen div.result form {
}
instead of:
.appscreen {
}
I am trying to build an AngularJS to-do list app for android using Cordova. The page loads fine if I open it in the browser, but I can't get any any script to run in the emulator, except for alert()s that I put in the global scope. Here is my code for the index.html page....
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>To-do list</title>
</head>
<body>
<div class="app" ng-controller="ToDoListController">
<h1>Things to do.</h1>
<ul>
<li ng-repeat="item in list" ng-bind="item"></li>
</ul>
</div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../platforms/android/platform_www/cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And for the index.js page:
$(document).ready(function(){
document.addEventListener('deviceready', function(){
});
angular.module('ToDo',[])
.controller('ToDoListController',['$scope',function($scope){
$scope.list = ["FOO","BAR"];
}]);
angular.bootstrap(document,['ToDo']);
$('ul').append('<li>Item appended</li>');
});
As I said, if I put an alert() in the global part if index.js, it will fire but nothing else will. The angular bootsrap and the jquery append function will not execute whether inside the $(document).ready() or outside of it. Everything works fine in a browser. Any help is appreciated.
Via Kerri Shotts, in the above comment:
You need everything you're going to source to be local to your www directory. Your files in node_modules aren't going to be copied over, and will be missing in your app. Hence part of your problem. The other problem is that you should only ever source cordova.js using src="cordova.js"; the appropriate file will be supplied when you build the app.
This worked. Thank you!
i have my application built around angularjs#1 using gulp, my final output is 2 javascript files and 2 css files.
this final index.html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="lib.css">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Momen</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body layout="row" ng-include="'common/body.html'" ng-controller="AppCtrl as app">
</body>
</html>
my question is sometimes i need to push a small update chaning couple lines in app.js
note that i use templateCache so all my html files are also inside my app.js
what is the best way to update app.js on the fly without resubmitting app to apple ?