I have a nw.js app with this package.json:
{
"main": "index.html",
"name": "test_app",
"window": {
"toolbar": false,
"position": "center",
"min_width": 800,
"min_height": 500,
"as_desktop": true,
"resizable": true,
"frame": true,
"chromium-args": "--ignore-certificate-errors"
},
"webkit": {
"plugin": true,
"page-cache": true
}
}
My index.html includes this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<iframe src="https://www.example.com"></iframe>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function myfunc(){
alert("my func");
}
</script>
</body>
</html>
The problem:
My site (src of iframe) https://www.example.com have a self signed certificate, so if I try to load in console give me this error:
Failed to load resource: net::ERR_INSECURE_RESPONSE
Why --ignore-certificate-errors don't extended inside iframe child?
Thanks in advance!
I found the solution in one of the issues on nw.js github repo.
Basically you need to use:
"chromium-args": "--allow-running-insecure-content --ignore-certificate-errors",
And it has to go outside of the window object (e.g. after name property) in the package.json file.
Related
Problem: Images are not showing in Lumen-vue project.
This question may seems a bit long. But I tried to make it visual easily.
In my lumen(8.3.4) server, I'm using a standalone vue frontend, and delivering the compiled css & js in public/frontend folder. Here is my folder structure
As you can see the vue app is inside the frontend folder my vue.config.js setting is as following:
const path = require("path");
const chunkPrefix = '[name]'
module.exports = {
filenameHashing: false,
outputDir: path.resolve(__dirname, "../public/frontend"),
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {name: `${chunkPrefix}.[ext]`}));
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
css: {
extract: {
filename: `css/${chunkPrefix}.css`,
chunkFilename: `css/${chunkPrefix}.css`,
},
},
configureWebpack: {
output: {
filename: `js/${chunkPrefix}.js`,
chunkFilename: `js/${chunkPrefix}.js`,
}
},
}
this delivering the compiled js & css after npm run build in public folder as per following
my app.blade.php is
<head>
<link rel="stylesheet" href="{{url('frontend/css/app.css')}}">
<link rel="stylesheet" href="{{url('frontend/css/chunk-vendors.css')}}">
</head>
<body>
<div>
<div id="app"></div>
</div>
<script type="text/javascript" src="{{url('frontend/js/chunk-vendors.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/app.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/0.js')}}"></script>
</body>
Now the problem is after loading the page is browswer, some images are not loading
This is how the inspect showing in case of failed picture
<img src="/img/profile02.png" alt="profile picture" class="img">
and the working one is
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU==" alt="whatsapp icon"">
My vue asset handing is as following.
Can't figure out why some images are not loading.
I wrote hello world vue js 3 simple Programme. then it gives following error. I want to pass vue property value to HTML value. but it doesn't work . please help me to resolve this .
package.json
{
"name": "myfirstproject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"vite": "^2.7.2",
"vue": "^2.6.14"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>Hello world {{msg}}</h1>
</div>
<script type="module">
import { createApp } from 'vue/dist/vue.esm.browser'
const app = createApp({
data(){
return {
msg: "Sri Lanka"
}
},
}).mount('#app');
</script>
</body>
</html>
I edited package.json , and add "vue": "^3.2.26" then delete node_modules and run yarn install ,
Then problem has been fixed
One quick question regarding ol-Cesium. I'm trying to integrate ol-Cesium into my Vue - Openlayers app. But I'm getting this type of error:
"ReferenceError: Cesium is not defined"
Basically what I'm trying is to activate 3d functionality on click but I'm stuck with error above.
I literally used code provided in examples
import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: this.$store.getters.olMap});
ol3d.setEnabled(true);
I'm using OpenLayers v 5.3.0
Ok, I've figured it out. I only needed to add script tag inside an index.html file that points to Cesium build
Example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="Vue-OpenLayers" content="Author: Agrivi d.o.o.; Wraping OpenLayers inside Vue.js">
<link rel="icon" href="<%= BASE_URL %>agrivi.ico">
<title>Agrivi Maps</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js" charset="UTF-8"></script>
</head>
<body>
<noscript>
<strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Hope it will help someone :)
The error is indicating it's a webpack error.
I'm referencing documentation found here: https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js
Make sure you've installed Cesium through NPM:
npm i --save-dev cesium olcs copy-webpack-plugin
Then, in your webpack.config.js file, add these lines:
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');
And in the configuration object of this file, add these lines:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: 'empty'
},
Then, add Cesium alias to this file:
resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource)
}
},
Then, add this to plugins in this file:
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment
What's the best way to embed a rally app inside a confluence document?
I tried pasting my code between {html} macros but it doesn't work
{html}
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p4/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
...
...
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
{html}
The above code works fine when opened directly, but doesn't display anything when pasted inside confluence's {html} macro. (I am logged into rally in another tab)
A work around is to host the html page on a server and include it in an {iframe} macro in confluence. However some browsers might have cross-domain related security issues.
Finally I decided not to render the content inside my confluence page. I just hosted the html page on a server and added a link to it in my confluence page.