Load vue app with jsonld data passed as parameter to the url - javascript

Let's say I have an Vue app http://www.example.com/?url=https://example-data.com/activity-sets/example/sample.jsonld .
I would like the vue app to load the page with the jsonld passed through the path given in the url i.e. https://example-data.com/activity-sets/example/sample.jsonld
The idea is : anyone should be able to modify the url to a different jsonld data located anywhere in the world. How can I achieve this?
I am new to Vue and am not getting a clear idea of what to do.

It's fairly easy to something like that. Just create a HTML document (index.html) in the root of your webserver and add the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var $_GET=[];
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,name,value){$_GET[name]=value;});
new Vue({
el: '#app',
data () {
return {
url: $_GET['url']
}
},
template: '<iframe :src="url"></iframe>'
})
</script>
</body>
</html>
It will read the ?url= contents from the url and insert it as an iFrame src.
In theory this will do the trick. If you test this with eg. ?url=https://twitter.com/chucknorris you will end up with an "Content Security Policy" violation. Most sites will be secured this way, so you should test this with your purpose.

Related

How to import a blazor custom element in another JS application?

I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

What are best practices for exporting variables passed from the server to HTML so that they can be used in javascript modules?

Let's say I'm serving up a web application and my server is passing an object to the front-end that looks like this:
{
user_name : "Robert",
user_settings : {/*some settings object*/}
}
If I want to access this information in, say, main.js, in the past I've just made this information global in my html file. (e.g.):
<html>
<head>
<title>Example Page</title>
<!-- style links would go here -->
</head>
<body>
<!-- script tags would go here -->
<script>
window.server_json = {
user_name : "Robert",
user_settings : {/*some settings object*/}
}
</script>
</body>
</html>
This really doesn't seem to fit into the way that we're writing javascript these days with webpack and babel. I would like to be able to export that object and use it in other files while avoiding globals.
I'm not sure how to go about this, but I envision it would looks something like:
(Example.html)
<html>
<head>
<title>Example Page</title>
<!-- style links would go here -->
</head>
<body>
<!-- script tags would go here -->
<script>
export default json = {
user_name : "Robert",
user_settings : {/*some settings object*/}
}
</script>
</body>
</html>
(Main.js)
import json from "./Example.html";
//Do something with the data received from the server
In my current project, I'm using webpack, babel, and vue.js. I've been searching for some way to do this for a few hours now, and would appreciate any help.
EDIT:
To clarify, the data would be sent from the server using PHP and the slim framework. It would look something like this:
$app->get('my/page', function($request, $response){
return $this->view->render($response, 'my_page.html', [
"user_name" => "Robert",
"user_settings" => [/*some settings object*/]
]);
});
You can use the vue-resource plugin to request the data from the server. You can use Web Storage API to cache the data on the client.

Handlebars.js wont compile/output my template/data

I'm playing around with Handlebars.js and trying to compile a small template. I am only using Handlebars.js and nothing more.
I am working locally on my computer, and not via any form of server.
my "html" looks like this. nothing special.
<!doctype html>
<html>
<head>
<script src="js/vendor/handlebars.min-4.0.4.js"></script>
</head>
<body>
<script id="menu-template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
</script>
<section id="menu">
</section>
<script src="js/menu.js"></script>
</body>
</html>
And my JS is
var source = document.getElementById('menu-template').innerHTML;
var template = Handlebars.compile(source);
var data = {title: "test"};
document.getElementById('menu').innerHTML = template(data);
It seems that template() does not return anything, i don't get any result except what looks like a empty string.
And i have been playing around with this for a few hours and searching the internet for answers but no result.
Am i doing anything wrong here?
// Edit added the rest of the html page.
The code seems correct just make sure the Handlebars.js file is properly included before the existing script tag.
Ref for Handlebars CDN : https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js

Meteor - Ckeditor Integration

I'm not sure if there has been a change in the way Meteor loads items, or the way it handles jquery, but I'm having an awful lot of trouble getting ckeditor to come up.
Main Template (Iron-router):
<template name="layout">
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
.....
</template>
Independent Editor Template:
<template name="editor">
<div class="editor_container">
<textarea class="editor"></textarea>
</div>
</template>
Ckeditor located at public/js/ckeditor, any time I try to do the Template.editor.rendered() technique, or even just trying to type $('.editor').ckeditor(); into the console, I get an error of:
$('.editor').ckeditor();
VM48825:2 Uncaught TypeError: undefined is not a function
Any ideas?
Try taking the <head> section out of the layout template. Reading here I believe the <head> section is treated specially be meteor (see: http://docs.meteor.com/#/full/structuringyourapp) and that it being inside a template may be causing the JS to actually not be loaded. Just a guess though.
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
.....
</template>
You can use IRLibLoader from iron:router into the onBeforeAction like this.
Router.route('/editor', {
name: 'editor',
template: 'layout',
onBeforeAction: function () {
var ckEditor = IRLibLoader.load('/js/ckeditor/ckeditor.js');
var adapter = IRLibLoader.load('/js/ckeditor/adapters/jquery.js');
if(ckEditor.ready() && adapter.ready()){
console.log('The 2 JS just finish load');
this.next(); // Render the editor page
if(Meteor.isClient){
Template.editor.rendered = function(){
$('.editor').ckeditor();
console.log("loading coeditor when template fully rendered");
}
}
}
}
});
Alternative on the main layout you can use this.
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
{{> yield}}
</template>
<template name="editor">
<div class="editor_container">
<textarea class="editor"></textarea>
</div>
</template>
And do the same rendered function
Template.editor.rendered = function(){
$('.editor').ckeditor();
//or make a little delay (1sec)
Meteor.setTiemout(function(){
$('.editor').ckeditor();
},100)
}
There are several problems with your code :
You can't put <head> sections inside another template, it must be done outside all templates.
The path to your JS files are broken, you must prepend a slash to them to reference files in the public directory.
Loading scripts in <head> sections is not a good idea because they will be loaded when your app first loads for every user, even if they never use the editor.
Here is a solution where we load every scripts asynchronously using jQuery promises when the editor template is rendered, and only then initialize the CKEditor.
Template.editor.rendered=function(){
var template=this;
$.when(
$.getScript("/js/ckeditor/ckeditor.js"),
$.getScript("/js/ckeditor/adapters/jquery.js")
).done(function(){
template.$(".editor").ckeditor();
});
};

Handlebars Pass a string or Handlebars AST to Handlebars compile

I know its been asked many times, I have looked at the answers and not sure where I am going wrong.
I have looked at the docs on Handlebarsjs and followed a tutorial and both times I am getting the same error.
<!DOCTYPE html>
<html>
<head>
<script src="handlebars-v1.3.0.js"></script>
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<script id="header" type="text/x-handlebars-template">
div {{ headerTitle }} div
Today is {{weekDay}}
</script>
</body>
</html>
And this is my Javascript
var theData = {headerTitle:"name", weekDay:"monday"}
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document.body).append(theTemplate(theData));
I keep on getting the following error and i am unsure why
Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile.
You passed undefined
You are running Handlebars.compile() before theTemplateScript is loaded into the DOM. Move your test.js down below the template script and you should be good to go.
Moving the scripts to the bottom of the page also worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script id="header" type="text/x-handlebars-template">
div {{ headerTitle }} div
Today is {{weekDay}}
</script>
<script src="handlebars-v1.3.0.js"></script>
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</body>
</html>
As others have said, the problem is that you are running Handlebars.compile() before the TemplateScript is loaded into the DOM.
Putting your javascript calls in $(document).ready() you make sure all the html is loaded first.
var theData = {headerTitle:"name", weekDay:"monday"}
$(document).ready(function(){
var theData = {headerTitle:"name", weekDay:"monday"}
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document.body).append(theTemplate(theData));
});
in my case i was trying to assign some value to more deeper steps therefore, i faced the error.
Before my code was
app.use(function (req, res, next) {
res.locals.partials.weather = {}; = getWeatherData();
next();
});
and the problem was
res.locals.partials.weather
after removing the layer partial my problem was gone.
and the final code is
app.use(function (req, res, next) {
res.locals.weather = getWeatherData();
next();
});
In my case I got the same error but the issue was a typo in the template script in the html page. I had 'prouct-template' should have been 'product-template':
<script id="prouct-template" type="text/x-handlebars-template">
...
</script>
Once I fixed the typo the error went away and page loaded ok.
A bit of modification is needed in JavaScript file. I had the same issue. In my code, I called "handlebars" from Views (following explanation is with respect to views).
Include following in initialize function(init) of View :
theTemplate = Handlebars.compile(theTemplateScript);
In render write the remaining code :
var theTemplate = Handlebars.compile(theTemplateScript);
$(document.body).append(theTemplate(theData));
The correct way is to precompile the Handler, Store in file and then assign it to theTemplate.
You're using Handlebars.compile() before the template script loads. One simple trick would do the work for you. Use the defer tag in your script so that the entire body loads before the script runs in your <head> tag.
<head>
<script src="" defer> </script>
</head>

Categories

Resources