In Apache Sling i want include a javascript into a HTML page.
Via http://localhost:8080/bin/browser.html/ I created two nodes (then manually): html.html and processing.js.
JSON of html.html is:
{
"jcr:created": "{Date}2018-04-19 20:50:09",
"jcr:createdBy": "admin",
"jcr:primaryType": "{Name}nt:file",
"jcr:content": {
"jcr:data": "/bin/cpm/nodes/property.bin/apps/res/html.html/_jcr_content?name=jcr%3Adata",
"jcr:lastModified": "{Date}2018-04-19 20:50:09",
"jcr:lastModifiedBy": "admin",
"jcr:mimeType": "text/html",
"jcr:primaryType": "{Name}nt:resource",
"jcr:uuid": "ed3121b3-580c-46b2-acc6-7029cdb6f1c3"
}
}
JSON of processing.js is:
{
"jcr:data": "/bin/cpm/nodes/property.bin/apps/res/processing.js?name=jcr%3Adata",
"jcr:lastModified": "{Date}2018-04-19 21:32:40",
"jcr:lastModifiedBy": "admin",
"jcr:mimeType": "text/javascript",
"jcr:primaryType": "{Name}nt:resource",
"jcr:uuid": "74fd137a-3b37-4893-b443-bd086a4fb4d7"
}
In page HTML I include processing.js with <script> tag in the <head> tag look like following:
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
Both nodes is located on the same path, that's "apps".
I get error in console of Mozilla Firefox:
http://i68.tinypic.com/a0cj88.png
In error.log file I get this error:
19.04.2018 22:13:32.813 *INFO* [0:0:0:0:0:0:0:1 [1524168812811] GET /apps/processing.js HTTP/1.1] org.apache.sling.engine.impl.SlingRequestProcessorImpl service: Resource /apps/processing.js not found
Why did I get this error? How can i fix it?
Please help me. Thanks you very much in advance.
Try to add the resource path to the src of your file.
<script type="text/javascript" src="${resource.path}/processing.js"></script>
THat should solve the problem
Related
I hava a laravel project, there is a README.md in the root directory. I can see the render result after pushing to GitHub, but I want to render markdown document in the local development browser.
I am trying two ways:
Read file from markdown file
convert markdown file to html with something like Webpack
Who can give a demo for this?
Since the mail blade templates parse markdown, you can use a similar approach to layout.blade.php which uses Illuminate\Mail\Markdown::parse.
In your template, such as welcome.blade.php, add this:
{{ Illuminate\Mail\Markdown::parse(file_get_contents(base_path() . '/README.md')) }}
Here is a Laravel Mix / Webpack solution, convert markdown file to html, and required in Vue.js, then show it with v-html.
First add markdown-loader
yarn add markdown-loader html-loader
Add config in webpack.mix.js, Laravel Mix can add custom config of Webpack.
mix.webpackConfig({
module: {
rules: [{
test: /\.md$/,
use: ["html-loader", "markdown-loader"],
}]
}
});
Considering README.md is in the root of Project, add a alias in webpack.mix.js
mix.alias({
'#': '/resources/js',
'#root': '/',
});
Now we can use a vue component to show the README.md at the root directory.
<script>
const readme = require('#root/README.md')
export default {
data() {
return {
readme: ""
}
},
created() {
this.readme = readme
}
}
</script>
<template>
<div class="container" ref="container" v-html="readme" />
</template>
I'm trying to port my extension from Chrome to Firefox, however I have problem
with X-Frame-Options. My extension is pretty simple, all it does is create few
iframes, wait for them to load and then extract some data from the loaded pages.
This all works great it Chrome, however in Firefox I have problem that the page
does not load in the iframe (probably due to X-Frame-Options: ALLOW-FROM XXX).
In Chrome having
"permissions": {
"https://example.com/"
}
is enough to make browser ignore the X-Frame-Options, but in Firefox
it still does not work.
So, how can I force Firefox to ignore this X-Frame-Options for my extension (and
its pages)?
EDIT: I would just like to add that since I'm using injected content script anyway (to get data from the frame), I don't need it to be in an iframe. All I need is to render the page without it being visible to user (so new tabs etc. are no-go :/).
EDIT2: This 2 file extension works in chrome, but not in firefox:
manifest.json
{
"manifest_version": 2,
"name": "Iframe test",
"description": "foobar",
"version": "0.9.3",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://jisho.org/"
]
}
popup.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<iframe src="https://jisho.org"></iframe>
</body>
</html>
It looks like it "just works" in Chrome because Chrome doesn't support "ALLOW FROM".
Firefox does the right thing here, but you can intercept this header like any other with the webRequest API, specifically webRequest.onHeadersReceived. Something like this (untested) should work:
browser.webRequest.onHeadersReceived.addListener((details) => {
let newHeaders = details.responseHeaders.filter(
header => !header.name.toLowerCase().endsWith('frame-options')
);
return {responseHeaders: newHeaders};
},
{
urls: [ 'https://jisho.org/*' ],
types: [ 'sub_frame' ]
},
['blocking', 'responseHeaders']
);
You also require the webRequest and webRequestBlocking permissions for this.
Clearly I'm missing something here, I'm trying to prevent caching using assets-webpack-plugin but I seem to have trouble understanding their documentation Here's what I did:
My Config
...
import assetPlugin from 'assets-webpack-plugin';
...
...
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.[hash].js'
},
...
plugins: [
new assetPlugin(),
...
That successfully generates a file in my root called webpack-assets.json which contains:
{"main":{"js":"/bundle.dbe7d464b6bdec429d82.js"}}
In their documentation the only example they give on how to even generate anything in the HTML template looks like this:
new AssetsPlugin({includeManifest: 'manifest'})
// assets.json:
// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}}
//
// Your html template:
// <script>
// {assets.entries.manifest.text}
// </script>
which I take it to mean, using my generated file: {webpack-assets.main.js}
So I add this in my HTML template:
...
<body>
<div id="app" ></div>
{webpack-assets.main.js}
...
I even tried with the commented out:
...
// {webpack-assets.main.js}
...
Curly brackets don't get replaced with anything so the HTML page just looks like .
{webpack-assets.main.js}
Clearly I'm missing something here that documentation, I'm guessing, assumed I knew already or I completely missed the ball on this.
Researching the error,
"EXCEPTION: TypeError: tagDef.requireExtraParent is not a function"
and it actually returns 0 results on Google.
Background:
site works fine on Chrome and Safari. haven't tested IE yet. whole separate nightmare there.
error is only for Firefox (seems all versions. Currently on 45 though)
I'm converting from TypeScript down to ES5 using System, following along with the Angular quickstart
On a mac if that matters
Angular2, beta 9
The site is very basic. I've removed all possible complications and it appears that the error is just in bootstrapping itself. Perhaps a missing polyfill?
index.html
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'js': {
defaultExtension: 'js'
}
}
});
System.import('js/main')
.then(null, console.error.bind(console));
main.ts (entry point)
/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app/components/app';
import 'rxjs/Rx'
bootstrap(AppComponent, [HTTP_PROVIDERS]); // if i comment this out, the error disappears indicating that it lives somewhere in app.ts.
app.ts
import {Component} from 'angular2/core';
#Component({
selector: "myapp",
templateUrl: "templates/app.html",
directives: [],
providers: []
})
export class AppComponent {}
What have I tried
Adding some additional polyfills, like html_parser which appears to be where the requireExtraParent method is defined.
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
Eliminate any compilation/transpiling errors.
Digging so deep that Google can't even find anything.
Your solution is spoton
<script type="text/javascript" src="dist/lib/html_parser.js"></script>
The problem was that I was using a reserved word in Angular as a tag (watch).
<services></services>
<collage></collage>
<watch></watch> <== problem
<collage></collage>
changing it to this works:
<services></services>
<collage></collage>
<watchit></watchit> <== works fine
<collage></collage>
this was impossible to debug. i had to go line by line commenting things out until eventually i figured out it was in the html, and eventually which line in particular introduced the problem.
posting only so if someone else hits this, they don't go so crazy.
My question, while at first somewhat similar to this one, seems to be a more basic question - and might be signaling a bug in the build system. I've created a custom build for my dojo application. I only build one layer right now, here's what the profile script/object looks like:
dependencies = {
stripConsole: "all",
action: "release",
optimize: "shrinksafe",
releaseName: "myProject",
// list of locales we want to expose
localeList: "en-gb,en-us,de-de",
layers: [
{
// Name: a relative path from the dojo.js in the desination directory.
name: "../../myProject.js",
dependencies: [
"myPackage.MyDataStore",
// MyWidget depends on a few other widgets, and has its own
// translation files.
"myPackage.MyWidget"
]
}
],
prefixes: [
// These paths are relative to the location of dojo.js
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "myPackage", "../../../src/myPackage" ]
]
}
When I run a build with that description it outputs files in the following directory structure:
release/
release/myProject/
release/myProject/dijit/
... dijit ...
release/myProject/dojo/
... dojo ...
release/myProject/dojox/
... dojox ...
release/myProject/myPackage/
... my custom package ...
release/nls/
myProject_en-us.js
myProject_de.js
etc..
../myproject.js
../myProject.js.uncompressed.js
Finally, in my test HTML page - I've got the following:
<script type="text/javascript">
var djConfig = {
debug: true,
parseOnLoad: false,
modulePaths: { // paths to directories in relation to dojo's location.... hurr.
'myPackage': '../myPackage',
'dojox': '../dojox',
'dijit': '../dijit'
}
};
</script>
<script type="text/javascript" src="./release/myProject/dojo/dojo.js.uncompressed.js"></script>
<script type="text/javascript" src="./release/myProject.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.require('myPackage.MyDataStore');
dojo.require('myPackage.MyWidget');
var store = new myPackage.MyDataStore();
var widget = new myPackage.MyWidget({
store: store
}, dojo.byId('testWidget'));
widget.startup();
});
</script>
But unfortunately, Firebug spits this out at me:
Bundle not found: MyWidget in myPackage , locale=en-us
What I Think is Happening
I've traced through some of the code leading up to the above error and it seems like the dojo.i18n._preloadLocalizations() call at the end of the file doesn't actually load in the correct nls file from ./release/nls.
Any idea how to fix this without resorting to manually including the nls files with <script> tags?
It's a bug of dojo, you should not use '..' in your layers name in case it will generate a NLS package.
please refer to http://bugs.dojotoolkit.org/ticket/5225