iframe with local resource in Electron - iframe

I need to render iframe in my Electron application:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe sandbox='allow-scripts' src='frm.html'></iframe>
</body>
</html>
where the frm.html links the local file script foo.js which is part of my Electron application
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="foo.js"></script>
</head>
<body>
<p>Inside iframe</p>
</body>
</html>
When I run the application in Electron I can see this error in devtools console
Not allowed to load local resource: file:///C:/electron/app1/foo.js
Is it possible such scenario in Electron?

This is a security feature of the iframe. Here is a similar question that talks about loading linked files into an iframe: Displaying local htm file in iframe?.
That being said, have you considered using the webview tag instead? http://electron.atom.io/docs/v0.30.0/api/web-view-tag/. The webview tag is very similar to an iframe, but gives you more ability to control the security around it. I tested loading a local file into a webview in the same way you attempt to load frm.html into the iframe and it works flawlessly.

Related

GLTF doesn't render, stuck in blue loading screen

I'm trying to load a GLTF model into an A-Frame script.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="guiana" src="/assets/guiana.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="#guiana"></a-entity>
</a-scene>
</body>
</html>
In my project folder I have an assets subfolder with the guiana.glb file.
Upon dropping the index.html into Chrome I get stuck in a blue loading screen:
Any debugging tips would be appreciated! Thanks!
Turns out it is a cross-site scripting issue (which you can tell by looking at the developer tools console). One way to fix it is by uploading your .GLB file somewhere else and including the full URL in the index.html.

Path to the CSS file in the header generated by IntelliJ is incorrect

I'm running a node.js project on localhost that I created with IntelliJ idea, and overall, it seems to work fine on Chrome from a usability standpoint. However, the CSS files don't resolve so I'm not getting any styles. Using the developer tools on Chrome, I can see that it can't find them. But it sure seems like they are there to me.
However, the main problem that I see is that headers are being added to the handlebars files which contain one of the broken shortcuts. Anyone know where in IntelliJ this is coming from? I tried adding the header info but it just is creating duplicate information.
The first set of info is the one that isn't coming directly from the file I created. I'm just not sure where it's coming from.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='style.css' />
</head>
</html>
I eventually figured it out - the problem is in the Express code setup that I had. The express setup defined a "static" file location for the public directory, so the trick to is to start the path with "/Static", like this
<link rel='stylesheet' href='Static/stylesheets/style.css' />
Then it finds it and I'm good to go!

ckeditor cdn not working when page loaded from file

I put the following (copied from the cdn website) in a file then opened it in FireFox A textarea is displayed rather than ckeditor. Is that expected behavior?
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Try this tutorial on how to setup and configure CKEditor in different environments, or get the demos' source code straight from github

fullcalendar UI not displaying

I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle

Grails not finding my resources

My Grails project structure:
my-app/
grails-app/
<mostly typical grails-app structure>
views/
web/
index.gsp
app/
admin/
layouts/
main.gsp
<rest of project structure is like any other Grails app>
So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.
My application.properties:
app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1
One section of my UrlMappings.groovy:
"/"(view:"/web/index")
My main.gsp layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="MyApp"/></title>
<g:resource dir="css" file="myapp.css" />
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<g:resource dir="js" file="myapp.js" />
</body>
</html>
My index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
/css/myapp.css
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
/js/myapp.js
</body>
</html>
So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.
I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?
I don't sure that tag into tag will be work correctly, so write like this:
<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>
According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.
Use the resources tag inside script or link tags to get your css/js loaded in your page like,
<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>
You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation

Resources