Opening html code as a file preview - javascript

I am fetching the HTML code from some external API. On my website, I want to create an anchor, which will open a new tab showing that HTML code parsed. How can I do that?
One way I know of is to just make an iframe, and show the code there, but that won't open a new tab and won't adjust the size easily.
What's the best way to solve this? I am using node.js express as a website's server.

you could use window.open("your url here") javascript function. You could just use an onclick attribute to call it like below:
<span onclick='window.open("your url here")'>view</span>
after which you could replace contents of a tag (lets say the body tag) with the html code received from the external API with standard javascript

Related

Using Javascript to insert url into Django template

I made a map application using Mapbox, where a user can click on a feature and a popup shows with details about the feature. I would also like to provide a link in the popup to the DetailView of the object using Javascript, but I'm having trouble generating the anchor tag. So far I have
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('To Detail View')
.addTo(map);
But when I try it out on the development server, it gives me a 404 error with a request url of
http://127.0.0.1:8000/map/%7B%25%20url%20app_name:view%20pk%3Dfoo%20%25%7D
How do I get it to pass the correct url? I've also tried inserting the link into a normal HTML div and I get the same problem.
It looks like its not recognizing your template tag as a template tag. Your syntax looks fine. Are you trying to use the url template tag in a javascript file? If so it wont work. You can only use template tags in the html files.
If this is in a html file, can you post the full code?

Html Iframe Excel , get a hyperlink in the excel to open a new tab or window

I have a excel file I turned into a .mht file, and I am embedding it successfully in a html page using iframe. Now the excel file has hyperlinks inside it. I am wondering If I can have it to where when a person clicks on a hyperlink inside the excel file it will open up a new tab in the web browser or just open up a new browser window. Can this be done through coding inside the iframe or do I have to do some kind of coding inside the excel file ?
Posting what the html code is if I can edit it or add a property to it if someone knows. Maybe I may need to use something besides iframe to get it to work on a html page.
<iframe src="LinktoFile.mht" width="100%" height="100%"></iframe>
any file that you convert/ save as from excel can easily be edited (using notepad even). ADvisable that you removable the microsoft auto-generated css, but the main thing is that you add a target ="_blank in your hyperlink html. This will make the hyperlinks open in a new window.
I know it works with html files but i don't see why mht files should differ greatly (and besides, why make life more difficult? Just save as a html file..)
I read that .MHT is a "Mime HTML" file, a kind of html archive. The browser support for it seems limited. If you're ok with that read on...
As long as the parent html file and the mht file are on the same domain, you might be able to add to/modify the DOM of the mht file. I don't know for sure.
Here is a test you can try. Modify your iframe tag with an id, and then put the script block right after it. The result should be that all tags in the iframe open in a new tab. If that doesn't happen please check the browser console for any errors and report back.
<iframe id='xl' src="LinktoFile.mht" width="100%" height="100%"></iframe>
<script>
$('#xl').on('load', function () {
$('#xl').contents().find('a').attr('target', '_blank');
});
</script>

Using JS to print page as PDF in Chrome and open it

I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.
There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.
The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html

Can't load url on same tab

I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.
You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.

cURL returns full HTML via AJAX - how to display to user?

I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.
If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/
If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility

Categories

Resources