I can put content into the body of the iframe without problems, but I cannot put stuff into the header or into the whole html part of the iframe.
So it completely ignores all the #media and #page stuff I need for print and I think it is because it puts my code into the body part. (yes I use document.body, but I dont know what else to use)
here is my iframe
<iframe id="contentFrame"></iframe>
and here is the code
var myHtml = ''
+ ' <!DOCTYPE html> '
+ ' <html> '
+ ' <head> '
+ ' <title>Testing</title>'
+ ' <meta charset="utf-8" />'
+ ' <style type="text/css"> '
+ ' #media print{ '
+ ' #page { '
+ ' size: landscape; '
+ ' margin: 10mm 5mm 5mm 5mm; '
+ ' mso-header-margin:0mm; '
+ ' mso-footer-margin:0mm; '
+ ' mso-paper-source:0; '
+ ' } '
+ ' } '
+ ' </style> '
+ ' </head> '
+ ' <body> '
+ all-my-content-goes-here
+ ' </body> '
+ ' </html> '
window.frames[0].document.body.innerHTML = myHtml;
and the result looks something like this:
Related
I am trying to create en ePub using the JSZIP javascript library but the output (i.e. epub.epub file) is not usable/reable
The following code does not work :
// Create a new ZIP file
var zip = new JSZip();
// Set the metadata for the book
var metadata = '<?xml version="1.0"?>' +
'<package xmlns="http://www.idpf.org/2007/opf">' +
' <metadata>' +
' <dc:title>My Book</dc:title>' +
' <dc:author>John Smith</dc:author>' +
' </metadata>' +
' <manifest>' +
' <item id="text" href="text.txt" media-type="application/xhtml+xml"/>' +
' <item id="toc" href="toc.ncx" media-type="application/x-dtbncx+xml"/>' +
' </manifest>' +
' <spine>' +
' <itemref idref="text"/>' +
' </spine>' +
'</package>';
zip.file("content.opf", metadata);
// Set the table of contents for the book
var toc = '<?xml version="1.0"?>' +
'<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">' +
' <head>' +
' <meta name="dtb:uid" content="book-id"/>' +
' <meta name="dtb:depth" content="1"/>' +
' <meta name="dtb:totalPageCount" content="0"/>' +
' <meta name="dtb:maxPageNumber" content="0"/>' +
' </head>' +
' <docTitle>' +
' <text>My Book</text>' +
' </docTitle>' +
' <navMap>' +
' <navPoint id="navpoint-1" playOrder="1">' +
' <navLabel>' +
' <text>Chapter 1</text>' +
' </navLabel>' +
' <content src="text.txt#xpointer(/html/body/p[1])"/>' +
' </navPoint>' +
' <navPoint id="navpoint-2" playOrder="2">' +
' <navLabel>' +
' <text>Chapter 2</text>' +
' </navLabel>' +
' <content src="text.txt#xpointer(/html/body/p[5])"/>' +
' </navPoint>' +
' </navMap>' +
'</ncx>';
zip.file("toc.ncx", toc);
// Add the text of the book to the ZIP file
// Add the text of the book to the ZIP file
zip.file("text.txt", "Chapter 1\n\nThis is the text for chapter 1.\n\nChapter 2\n\nThis is the text for chapter 2.");
// Generate a downloadable EPUB file from the ZIP file
zip.generateAsync({ type: "blob" })
.then(function (blob) {
saveAs(blob, "epub.epub");
});
Could you please help me find a solution or redirect toward an existing library ?
I want to be able to use it within a chrome extension, I tried jEpub but it is blocked by chrome.
There are a number of issues with your EPUB generation which would suggest you haven't read through the OPF specification which can be found here: https://idpf.org/epub/30/spec/epub30-ocf.html
The (main) issues are:
Missing metadata file
Incorrect structure (best practice)
OPF file missing version package version
You're using the dc namespace without it being defined. Define it.
Missing required dc elements such as dc:identifier.
dc:author doesn't exist as an element. Use dc:creator instead
Your spine should declare toc="toc"
Pages should be of type .xhtml
You should also include a nav file
Here is a working version of your script:
var zip = new JSZip();
// Set the metadata for the book
var mimetype = 'application/epub+zip';
zip.file("mimetype", mimetype);
var container = '<?xml version="1.0"?>' +
'<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">' +
' <rootfiles>' +
' <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml" />' +
' </rootfiles>' +
'</container>';
zip.file("META-INF/container.xml", container);
var metadata = '<?xml version="1.0"?>' +
'<package version="3.0" xml:lang="en" xmlns="http://www.idpf.org/2007/opf" unique-identifier="book-id">' +
' <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">' +
' <dc:identifier id="book-id">urn:uuid:B9B412F2-CAAD-4A44-B91F-A375068478A0</dc:identifier>' +
' <meta refines="#book-id" property="identifier-type" scheme="xsd:string">uuid</meta>' +
' <meta property="dcterms:modified">2000-03-24T00:00:00Z</meta>' +
' <dc:language>en</dc:language>' +
' <dc:title>My Book</dc:title>' +
' <dc:creator>John Smith</dc:creator>' +
' </metadata>' +
' <manifest>' +
' <item id="text" href="text.xhtml" media-type="application/xhtml+xml"/>' +
' <item id="toc" href="../OEBPS/toc.ncx" media-type="application/x-dtbncx+xml"/>' +
' </manifest>' +
' <spine toc="toc">' +
' <itemref idref="text"/>' +
' </spine>' +
'</package>';
zip.file("OEBPS/content.opf", metadata);
// Set the table of contents for the book
var toc = '<?xml version="1.0"?>' +
'<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">' +
' <head>' +
' <meta name="dtb:uid" content="urn:uuid:B9B412F2-CAAD-4A44-B91F-A375068478A0"/>' +
' <meta name="dtb:depth" content="1"/>' +
' <meta name="dtb:totalPageCount" content="0"/>' +
' <meta name="dtb:maxPageNumber" content="0"/>' +
' </head>' +
' <docTitle>' +
' <text>My Book</text>' +
' </docTitle>' +
' <navMap>' +
' <navPoint id="navpoint-1" playOrder="1">' +
' <navLabel>' +
' <text>Chapter 1</text>' +
' </navLabel>' +
' <content src="text.xhtml#xpointer(/html/body/section[1])"/>' +
' </navPoint>' +
' <navPoint id="navpoint-2" playOrder="2">' +
' <navLabel>' +
' <text>Chapter 2</text>' +
' </navLabel>' +
' <content src="text.xhtml#xpointer(/html/body/section[2])"/>' +
' </navPoint>' +
' </navMap>' +
'</ncx>';
zip.file("OEBPS/toc.ncx", toc);
// Add the text of the book to the ZIP file
// Add the text of the book to the ZIP file
var text = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>' +
'<!DOCTYPE html>' +
'<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en" lang="en">' +
' <head>' +
' <title>My Book</title>' +
' </head>' +
' <body>' +
' <section><h1>Chapter 1</h1>' +
' <p>This is the text for chapter 1.</p>' +
' </section>' +
' <section><h1>Chapter 2</h1>' +
' <p>This is the text for chapter 2.</p>' +
' </section>' +
' </body>' +
'</html>';
zip.file("OEBPS/text.xhtml", text);
// Generate a downloadable EPUB file from the ZIP file
zip.generateAsync({ type: "blob" }).then(function (blob) {
saveAs(blob, "epub.epub");
});
Ensure that you also run your generated EPUB against a validator to debug. Something like https://draft2digital.com/book/epubcheck/upload is good.
Using bootstrap i make a data table which is working fine in localhost. But when i add that code snippet to my portlet in NetSuite dashboard table is showing but pagination and search box is not showing.[Data Table in Netsuite Dashboard][1]
'''
define(['N/file'],
function (file) {
function render(params) {
params.portlet.title = 'Services';
var myvar = '<!DOCTYPE html>' +
'<html lang="en">' +
'' +
'<head>' +
' <title>Bootstrap Example</title>' +
' <meta charset="utf-8">' +
' <meta name="viewport" content="width=device-width, initial-scale=1">' +
' <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">' +
' <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">' +
'</head>' +
'<style type="text/css">' +
' div.dataTables_wrapper {' +
' margin-bottom: 3em;' +
' }' +
'</style>' +
'<body>' +
' <div class="container-fluid">' +
' <table id="" class="table table-striped table-bordered display" style="width:100%">' +
' <thead>' +
' <tr>' +
' <th>Name</th>' +
' <th>Position</th>' +
' <th>Office</th>' +
' <th>Age</th>' +
' <th>Start date</th>' +
' <th>Salary</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' <tr>' +
' <td>Tiger Nixon</td>' +
' <td>System Architect</td>' +
' <td>Edinburgh</td>' +
' <td>61</td>' +
' <td>2011/04/25</td>' +
' <td>$320,800</td>' +
' </tr>' +
' <tr>' +
' <td>Garrett Winters</td>' +
' <td>Accountant</td>' +
' <td>Tokyo</td>' +
' <td>63</td>' +
' <td>2011/07/25</td>' +
' <td>$170,750</td>' +
' </tr>' +
' <tr>' +
' <td>Michael Bruce</td>' +
' <td>Javascript Developer</td>' +
' <td>Singapore</td>' +
' <td>29</td>' +
' <td>2011/06/27</td>' +
' <td>$183,000</td>' +
' </tr>' +
' <tr>' +
' <td>Donna Snider</td>' +
' <td>Customer Support</td>' +
' <td>New York</td>' +
' <td>27</td>' +
' <td>2011/01/25</td>' +
' <td>$112,000</td>' +
' </tr>' +
' </tbody>' +
' </table>' +
' </div>' +
' <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>' +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>' +
' <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>' +
' <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>' +
' <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>' +
' <script type="text/javascript">' +
' $(document).ready(function() {' +
' $(\'table.display\').DataTable();' +
' });' +
' </script>' +
'</body>' +
'' +
'</html>';
var content = '<td><span><b>Hello!!!</b></span></td>';
params.portlet.html = myvar;
}
return {
render: render
};
});
'''
[In Local Data Table][2]
[1]: https://i.stack.imgur.com/rfG1x.png
[2]: https://i.stack.imgur.com/4A2pt.png
I am actually writing a SOAP command (from javascript) for an Outlook Add-In that sends a mail (to run on an Exchange Server). In the mail, I want to include 2 hyperlinks in 2 different lines. As of now, the code is as follows;
{
var soapNotificationItem = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
' xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages"' +
' xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
' xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"' +
' xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types">' +
' <soap:Header>' +
' <RequestServerVersion Version="Exchange2013" xmlns="http://schemas.microsoft.com/exchange/services/2006/types" soap:mustUnderstand="0" />' +
' </soap:Header>' +
' <soap:Body>' +
' <m:CreateItem MessageDisposition="SendAndSaveCopy">' +
' <m:Items>' +
'<t:Message>'+
'<t:Subject>Notification email</t:Subject>'+
'<t:Body BodyType="HTML">' + MyMessage + '</t:Body>' +
' <t:ExtendedProperty>' +
' <t:ExtendedFieldURI PropertyTag="16367" PropertyType="SystemTime" />'+
'<t:Value>2014-01-02T21:09:52.000</t:Value>'+
'</t:ExtendedProperty>'+
'<t:ToRecipients>' + MyMailAdd + '</t:ToRecipients>' +
'</t:Message>'+
' </m:Items>' +
' </m:CreateItem>' +
' </soap:Body>' +
'</soap:Envelope>';
mailbox.makeEwsRequestAsync(soapNotificationItem, soapNotificationItemCallback);
}
As you can see, I have my parameter MyMessage, which I am constructing separately, as represented in the below example;
MyMessage = "www.mylink1.com" + "
" + "www.mylink2.com"
Any Idea how I make hyperlinks out of the 2 links with a line break in between. The
does not work either.
Finally I managed to find a solution to the issue. By specifying the Body type to HTML <t:Body BodyType="HTML">, I have been able to add simple HTML.
To simplify, the HTML construction follows the below format, though in my case, I was reading the data from a XML file, looping and concatenating the message to be displayed.
var link1 = "www.test.com"
var MyMessage = "<strong>Click on link :</strong>: " + Link1 + "";
Then coming to the SOAP part, it remains as is;
{
var soapNotificationItem = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
' xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages"' +
' xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
' xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"' +
' xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types">' +
' <soap:Header>' +
' <RequestServerVersion Version="Exchange2013" xmlns="http://schemas.microsoft.com/exchange/services/2006/types" soap:mustUnderstand="0" />' +
' </soap:Header>' +
' <soap:Body>' +
' <m:CreateItem MessageDisposition="SendAndSaveCopy">' +
' <m:Items>' +
'<t:Message>'+
'<t:Subject>Notification email</t:Subject>'+
'<t:Body BodyType="HTML">' + MyMessage + '</t:Body>' +
' <t:ExtendedProperty>' +
' <t:ExtendedFieldURI PropertyTag="16367" PropertyType="SystemTime" />'+
'<t:Value>2014-01-02T21:09:52.000</t:Value>'+
'</t:ExtendedProperty>'+
'<t:ToRecipients>' + MyMailAdd + '</t:ToRecipients>' +
'</t:Message>'+
' </m:Items>' +
' </m:CreateItem>' +
' </soap:Body>' +
'</soap:Envelope>';
mailbox.makeEwsRequestAsync(soapNotificationItem, soapNotificationItemCallback);
}
NOTE: for the link to appear correctly in Office365, do add the # in front of the link.
I'm using firebase to get this data,
I'd like to add href tags to message.userName output
$('#winners').text('Winner:' + ' ' + message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:' + ' ' + message.startTime + ' ' + ' '+ 'End time:' + '' + message.endTime );
I've tried
$('#winners').text('Winner:' + ' ' + '<a href=\"scoreTracker.php?id='+message.userID +'\"> + ' message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:'
+ ' ' + message.startTime + ' ' + ' '+ 'End time:' + '' + message.endTime + '<\a>' );
To avoid XSS attacks (among other weird problems), append an anchor element and set its text. This means you don't have to worry about escaping anything.
$('#winners').append([
'Winner: ',
$('<a>')
.attr('href', 'scoreTracker.php?id=' + encodeURIComponent(message.userId))
.text(
message.userName + ' score: ' + message.score + ' Start time: ' + message.startTime + ' End time: ' + message.endTime
)
]);
If your HTML gets much more complicated, might I suggest a JavaScript template engine? I use Swig for most projects, but there are many choices.
you have to use append() , or html()
$('#winners').append('Winner:' + ' ' + message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:' + ' ' + message.startTime + ' ' + ' '+ 'End time:' + '' + message.endTime );
this may help you to understand better :
http://api.jquery.com/category/manipulation/dom-insertion-inside/
Both #Brad and #ProllyGeek are correct -- but #Brad's solution is best given the potential risk of XSS attacks. Here is his code, just cleaned up a bit for better readability. :)
$('#winners').append([
'Winner: ',
$('<a />')
.attr('href', 'scoreTracker.php?id=' + encodeURIComponent(message.userId)
.text(message.userName + ' score: ' + message.score + ' Start time: ' + message.startTime + ' End time: ' + message.endTime)
]);
Hope this helps!
I'm using phonegap to get an accelerometer's value and print it, but I'm not sure how to display it in the main body. I'm also using JQuery. This code is taken from the accelerometer example on the Cordova (PhoneGap) website.
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
document.writeln(
'Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
in HTML tag, use this code.
<p id="ax"></p>
<p id="ay"></p>
<p id="az"></p>
and on function onSuccess(acceleration) in javascript code. you should use this command
document.getElementById("ax").innerHTML = acceleration.x;
document.getElementById("ay").innerHTML = acceleration.y;
document.getElementById("az").innerHTML = acceleration.z;
or using jQuery like this
$("ax").html(acceleration.x);
$("ay").html(acceleration.y);
$("az").html(acceleration.z);