I have a database connected to dynamic pages. One of the columns in the database is an HTML embed code that I would like embedded on each page.
Is there a way of hardcoding the content of the database to an HTML Embed Frame via Velo? If so, how can this be done exactly?
There is no built-in way (click and play) but you can pass the html using postMessage from the website to the iframe.
For example:
Website code:
$w('#html1').postMessage(htmlFromTheDatabase)
HTML component code
<html>
<body>
<div id="content"></div>
<script>
window.addEventListener('message', message => {
console.log('message', message.data);
document.querySelector('#content').innerHTML = message.data
});
</script>
</body>
</html>
https://moshef9.wixsite.com/html-from-db
Related
I am trying to create an html content from json data in react native. Basically i want to generate PDF from html content which i have already done using static html content in my react native app, but now we want to generate pdf with dynamic content and decide the data to be in json and convert them into html content and then generate pdf from the html content.
Our web team has already done this rendering the json data into dom and then generating pdf from the dom using react.
Is it possible to achieve the same using react native.
You can achieve this like doing this- (use backticks instead of single or dubble quotes)
const JsonData = {
title: 'My PDF File',
image: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/pdf.png'
}
const html = `
<html>
<head>
<meta charset="utf-8">
<title>MyPDF</title>
<style>${htmlStyles}</style>
</head>
<body>
<h1>${JsonData.title}</h1>
<img src=`${JsonData.image}` />
{JsonData.otherData}
</body>
</html>
`;
Checkout example for this:
https://github.com/vishalpwr/react-native/tree/master/CreatePdf
I am trying to embed a public FB post into the main page of my application. I am following FB guide and it's pretty simple. It works when I do it in .html file, but doesn't with Next JS.
Basically, instructions are that you need to insert this right after the body opening tag
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId={appId}" nonce={someNonce}"></script>
and then you put the other part wherever you want.
I even created a custom _document.js file and included this script, I can also see it in the browser. But the post does not get loaded.
Anyone had this kind of issue?
Assuming you already have the JS SDK loaded in your document, like you mentioned (you might also load the script on-demand via JavaScript if preferred).
// pages/_document
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<!-- additional code -->
<body>
<!-- additional code -->
<script
async
defer
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"
/>
</body>
</Html>
);
}
}
You can then render a Facebook post inside one of your components with:
<div
className="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
/>
For further details refer to the official Embedded Posts documentation.
I found alot of outdated options on the web so Just wandering what should be the best approach to convert DOM, as an PDF attachment and then send it via email.
I am using React as Front-end and .Net Core web Api as backend.
Thanks in Advance :)
Download jsPDF from Github Include these scripts below:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an
ID, which you can then ignore in a special element handler of jsPDF.
Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in
a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
One very important thing to add is that you lose all your style
information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3
etc., which was enough for my purposes. Additionally it will only
print text within text nodes, which means that it will not print the
values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
Attach the pdf and send emails with the help of this link
var testApp = angular.module('testApp',['ngSanitize']);
testApp.controller('TestController',function($scope,$sce){
$scope.htmlString = "<span>Test HTML</span><script>alert('Hello Script');</script>";
$scope.toTrusted = function(htmlContent) {
if(htmlContent && htmlContent != "") {
return $sce.trustAsHtml(htmlContent);
}
return "";
};
});
<html ng-app="testApp">
<body ng-controller="TestController">
<div ng-bind-html="toTrusted(htmlString)"></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular-sanitize.min.js"></script>
<script type="text/javascript" src="resources/js/controllers/testController.js"></script>
</body>
</html>
I am using ng-bind-html for rendering string as html.Sometimes i am getting script tag in html string and i don't want to inject/load script tag.So what should i do to prevent script tag.
I have also searched the solution for this issue,somebody says that just remove script tag from string before rendering html.So please somebody suggest me.What is the better way to do that?
I am developing chat app with the help of angularjs and firebase.And for rendering chat messages i use ng-bind-html directive.What I have noticed that if user send script tag as part of chat messages but given script is being run.So I want to restrict this script to run.
If you are using $sce.trustAsHtml, you need to use ng-bind alone.
<div ng-bind="toTrusted(htmlString)"></div>
Try this and let me know.
I am running into an issue in my backbone/underscore application. Our site uses recaptcha and we want to put that content inside a view. We are using underscore for templates. How would i put the recaptcha code inside a template? THe problem is there are scripts tags required for recaptcha and it collides with the underscore script tag. For example it would look something like this:
<script type="text/javascript" id="someTemplate">
<div>
some html here
</div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challengek=YOUR_PUBLIC_KEY"
</script>
any help is appreciated. Thanks!
Underscore does not prevent you from using script tags, your problems come from your template declaration : you use type="text/javascript" which means your browser tries to interpret your template as Javascript and you get erratic results.
Try
<script type="text/template" id="someTemplate">
<div><%= text %></div>
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challengek=<%= key %>"
/>
</script>
and a demo http://jsfiddle.net/VxjBs/
As you noted in the comments, Recaptcha tries to loads a second script via document.write and fails when inserted in the DOM (see Can't append <script> element for a probable explanation).
Your best bet is probably to go through Recaptcha Ajax API, generate your HTML, identify a node and apply Recaptcha.create on it. Something like
<script type="text/template" id="someTemplate">
<div><%= text %></div>
<div class='recaptcha'></div>
</script>
The basis for a view could be
var html = _.template(src, {
text: 'in div'
});
var $el = $('#render').append(html);
$el.find('.recaptcha').each(function(idx, el) {
Recaptcha.create(
pubkey,
el
);
});
http://jsfiddle.net/nikoshr/VxjBs/2/
Not sure what all the reCAPTCHA script does, but I'm assume it tries to append HTML right after itself. If that's the case then you will probably need to manually attach a script node to the view after you've rendered it and then set the src of the script node to the URL of the external javascript file.
You cannot put script tags inside an underscore template as the browser will only parse the outer-most script tag (your template).
The proposed solution is too complicated.
This can be achieved very easily as follows (in fact I've just implemented it in my project).
Make sure to include the recaptcha js file in the "head" element of your page as follows:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Add this function in your javascript somewhere.
var render_recaptcha = function(target_id) {
grecaptcha.render(target_id, {
'sitekey' : RECAPTCHA_SITE_KEY
});
};
Then, just call this function after you render your template:
<script type="text/template" id="someTemplate">
<div><%= text %></div>
<div id='recaptcha'></div>
</script>
//render template like you usually would
//...
//then render the recaptcha
render_recaptcha('recaptcha');
That's it.