Is there a way to disable web security on Electron (chromium)?
Via JavaScript or something?
Found it:
new BrowserWindow({webPreferences: {webSecurity: false}});
In electron's Documentation for BrowserWindow you can use the object 'webPreferences' that comes along with a couple options, 'webSecurity' being one of them. What worked for me to disable web security was the following:
const win = new BrowserWindow({
webPreferences: { webSecurity: false }
});
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: { webSecurity: false }
})
import { app, BrowserWindow } from 'electron'
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: { webSecurity: false }
})
This is the solution, and it works for me.
mainWindow = new BrowserWindow({
'web-preferences': {'web-security': false},
width: 1800,
height: 1600,
});
web preferences part fixed the issue for me.if it didn't work try
app.commandLine.appendSwitch('disable-web-security');
mainWindow = new BrowserWindow({
'node-integration': 'iframe',
'web-preferences': {'web-security': false},
width: 1800,
height: 1600,
});
Related
In iOS ellipsize property is not working for me. The same code is working for android. I have attached the iOS screenshot for iOS issue below. Please help me to understand If I am missing something.
Thanks in Advance!!!
Ti SDK: v9.0.3GA
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: 'auto',
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//horizontalWrap: true,
wordWrap: false,
ellipsize: true,
maxlines: 1
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
I just did research on this above issue and I came to know in iOS its automatically applied ellipsize property to your labels. The only thing we need to take care is height property if possible remove or assigned Ti.UI.SIZE.
I have modified my above code and mentioned here in this post. I write a conditional logic for android device.
var deviceDetect = require('./deviceDetect');
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: Ti.UI.SIZE,
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//wordWrap: false, //remove this deprecated in Ti v8.x
ellipsize: deviceDetect.isAndroid() ? true : false,
lines: deviceDetect.isAndroid() ? 1 : undefined
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
I am trying to implement dark mode theme in our app for iOS 13 and above. I have followed this link Dark Mode in iOS 13. But I am facing some issue. I have attached the sample code below. I am expecting if I change enable dark appearance then it should change the color of window according to semantic colors file.
var deviceDetect = require('./deviceDetect');
var dialog = require('./dialogueBox');
var currentStyle = deviceDetect.isIos() ? Ti.App.iOS.userInterfaceStyle : undefined;
var colorWindow = Ti.UI.fetchSemanticColor("backgroundColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow,
layout: 'vertical'
});
var top = Ti.UI.createView({
backgroundColor: 'red',
layout: 'horizontal',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
top: deviceDetect.isAndroid() ? 0 : '50%'
});
var view = Ti.UI.createView({
center: { x: 205, y: 250 },
height: 400,
width: 300,
backgroundColor: colorWindow,
layout: 'vertical',
top: '20%'
});
var img = Titanium.UI.createImageView({
center: { x: 150, y: 110 },
image: './logo.png',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
view.add(img);
var emailField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 30,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
var passField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
view.add(emailField);
view.add(passField);
if (deviceDetect.isIos() && currentStyle === Ti.App.iOS.USER_INTERFACE_STYLE_DARK) {
// dark mode
console.log("I am here", colorWindow, colorWindow[Ti.UI.semanticColorType]);
//win.backgroundColor = 'green';
}
if (deviceDetect.isIos()) {
Ti.App.iOS.addEventListener('traitcollectionchange', function (event) {
if (currentStyle !== Ti.App.iOS.userInterfaceStyle) {
currentStyle = Ti.App.iOS.userInterfaceStyle;
if (currentStyle == 2) {
//tfAmount.color = 'white';
// dark mode
//win.backgroundColor = colorWindow;
//view.backgroundColor =
} else {
//win.backgroundColor = '#AAAAFF';
//view.backgroundColor = '#90EE90';
}
//console.log(colorWindow);
//win.backgroundColor = colorWindow;
//Ti.API.info('User Interface Style changed: ' + currentStyle);
}
});
}
win.add(view);
win.add(top);
win.open();
Here are the semantic.colors.json file content:
{
"backgroundColor": {
"light": "#ffffff",
"dark": "#000000"
}
}
Thanks in advance!!!
let me know If I missing something.
I've slimmed down the example to see just the parts that are needed and it works fine (iOS + Android [I've used 9.1.0 already]):
/app/controllers/index.js
var colorWindow = Ti.UI.fetchSemanticColor("windowBackgroundColor");
var bgColor = Ti.UI.fetchSemanticColor("viewColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow
});
var view = Ti.UI.createView({
height: 300,
width: 300,
backgroundColor: bgColor
});
win.add(view);
win.open();
/app/assets/semantic.colors.json
{
"windowBackgroundColor": {
"dark": "#666666",
"light": "#ff0000"
},
"viewColor":{
"dark": "#00ff00",
"light": "#0000ff"
}
}
Make sure to use 9.0.3.GA (or later).
It will display a grey/green or red/blue screen, depending on your phones settings. Also make sure to close the window when changing the dark-mode on Android.
I can generate the diagram in Chrome, Firefox, Safari and Microsoft Edge but not in IE11. When I look at the console, it tells me that there are two issues:
1.) 'init' is undefined
2.) Syntax error
In the initialization I do the following:
<script src="https://unpkg.com/gojs/release/go.js"></script>
<script src="/js/GenerateMap.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
Inside GenerateMap.js I have the following:
function init() {
var newString = document.getElementById("valueFromServer").value;
var GO = go.GraphObject.make;
....}
And for the Syntax error it tells me that it's at line 13. The line containing ").":
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
),
new go.Binding("location", "loc", go.Point.parse)
));
Why would these issues only be with IE11?
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
The issue is related to the above code, at the end of the Binding method, there have an extra ',' symbol, try to remove it.
The following code should be works well, try to use it.
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name")
),
new go.Binding("location", "loc", go.Point.parse)
));
I am using croppie js for loading image on my project, image loads fine in Chrome & Firefox.
This is What I Get on Chrome and Firefox
and this on Internet Explorer 11.
Here is My code
var basic = $("#div" + selector).croppie({
viewport: {
width: 200,
height: 200
},
boundary: {
width: widthContainer,
height: 300
},
showZoomer: true,
enforceBoundary:true
});
var bindPromise = basic.croppie('bind', {
url: path
});
$("#pnlcrop .cropcontainer div.croploader").remove();
$("#div" + selector).show();
}
Can anyone tell me why this issue is happening on IE11 ?
I Solved the Issue By using enableExif: true and exif.js.
Here is my Fixed code :
$("#div" + selector).croppie('destroy');
var basic = $("#div" + selector).croppie({
enableExif: true,
viewport: {
width: 200,
height: 200
},
boundary: {
width: widthContainer,
height: 300
},
showZoomer: true,
enforceBoundary:true
});
var bindPromise = basic.croppie('bind', {
url: path,
});
I came across a strange problem that some 'fireEvent' in views will not act after my sencha application being building production. Before building, all is normal, the action will take place as expected, however, after building production, I found that the 'fireEvent' fired by 'this' is normal, but by a variable is anormal. Following is my code.
Ext.define('WirelessCity.view.TopMenu', {
extend:'Ext.Toolbar',
alias:'widget.topmenu',
initialize: function(){
this.callParent(arguments);
var topMenu = this;
var btn = {
xtype: 'button',
width: 42,
margin: '5 0 5 3',
border: '0',
style: 'background:url(resources/images/left_btn.png);',
handler: this.onMarkButtonTap, // will work
scope: this
};
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
initialize: function(){
this.element.on({
tap: function(){
topMenu.fireEvent('searchCmd', topMenu); // will not work
}
});
}
}
this.add([btn, search]);
},
config: {
docked: 'top',
//flex: 1,
height: 38,
padding: 0,
margin: 0,
border: 0,
style: 'background:url(resources/images/top.png)'
},
onMarkButtonTap: function(){
//Ext.Msg.alert('mark');
this.fireEvent('markCmd', this);
}
});
This is because you can only pass configs when creating new components, not functions (like initialize). If you want to override methods like that, you must create your own class by extending another (Ext.Button in this case).
For your specific usage though, you can just use the element option when adding the listener:
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
listeners: {
element: 'element',
tap: function() {
topMenu.fireEvent('searchCmd', topMenu);
}
}
};