How to embed local HTML file to existing GWT page - html

I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.

Related

src in html not allowed to load a local resource

I am doing a project, where I need to show an image on html page. The image is located in a network drive. Using the below tag to refer to the image, I receive a "Not allowed to load local resource:" error.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
If I however, open a new tab in the same Edge web browser, and copy the file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png into the address bar, the image is displayed inside the web browser. I have tried with Google Chrome in stead of Microsoft Edge and turned off the security feature, but still get the same error.
Additional information.
The HTML page was rendered using Django as backend. In my Django template I have.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
Could an alternative approach be that the front end is doing a request to the backend that then fetches the image, and put it somewhere that can be reached from front end?
For my project, the solution I ended up using was for my frontend to send a request to the backend. The backend then fetches the image, and send it as a blob to the frontend. I know that setting up a webserver is another possibility, but in this case my Django backend already acts as a webserver.

How to open/display text file content coming from backend in modal window using angular 7

I am new to angular and looking for a solution where I can select a text file from a list of text files coming from back-end using a checkbox and display its content on click of a button let's say [View Content] in modal window or a dialog box.
The meta-data of all files visible is to be displayed in a table at front-end.
The backend API fetching the file details just provide the id,URL,fileName in json format displayed in a table and files are stored in the file repo lets say google drive.
Any working solution link will be helpful to understand the implementation.
Just make a request and get the file by url using angular http client. And then you can use some library to display it according to the file type.
PS: Image can be fetched directly.

view html source while using CSR with React

I'm studying ways to develop a SEO-friendly React website with CSR.
I have read many articles pointing out that to provide a SEO-friendly website, one should go with the SSR approach.
To my knowledge, when using browser's view source feature in CSR, the html content is a bunch of javascript bundle files and the actual html would not be present since view source only shows what's rendered from server side. while in SSR html is rendered and passed to the browser and the displayed html would be present in source view of the page.
However https://divar.ir (a well known retailer site) seems to be using CSR (upon clicking any link, the data is fetched from an api endpoint in json format via an ajax call and then it looks like the page is rendered in client side).
The thing is, when I view the source of the page even after clicking any link, I can see the actual html that is being displayed.
So to sum it up, How can I use CSR in React, and when I view the source of a page, I actually see the html that is being displayed to the user?
Server side rendered react applications usually only pre-render the initial page load. Subsequent navigation may still be entirely handled and rendered by the client.
By using the view source tool it will open the code in a new tab (at least in chrome) that leads to a fresh load of the current route from the server. If the application is server side rendered you will receive a pre-rendered version of that route and therefore see the html for that route.
By providing a sitemap of your website a bot can discover all SEO relevant routes by visiting the urls provided in the sitemap. Each of those requests are independent requests to the server and will be pre-rendered in contrast to how a real user would navigate the page by clicking the links.

How to preview local files in the browser in another html page

i am looking for a creative solution for a new task.
my issue is we need a way to preview local files (extentions: doc, docx, ppt, pptx, pdf, tif, jpeg) in a frame or so of a different web page which provides a link.
preview should look like an image of the files or so.
we would like to prevent parsing the files to pdf in order to save time...
we are using angular 7, c# asp.net server side.
we are very limitted in most solutions, as the data is very secure and is used in an inner office net,
that is why we can't use the google docs solution.
i also understood that using iframe tag and pointing it src attribute to the file source doesn't load the page due to security resones.
in addition all users has the ability to preview the above files types when they do it straight from the document by the open with -> IE or other browsers options.
i tried :
<iframe src="file:///C:/Users/cd/Downloads/MyFile.docx"></iframe>
but:
the iframe tag doesn't open the doc file, i can see the iframe in the DOM as a new html but it doesnt have a content of anything
i tried also for images and the same, the frame is blank
If you are using chrome then chrome specifically blocks local file access this way for security reasons.
more detail is this link : here
One possible solution is, render the document pages as images and then display them on the web page i.e. using the iframe.
You may use GroupDocs.Viewer for .NET for rendering the document pages into high-fidelity images (PNG/JPG). You can then embed the images into your web page to preview the document. This is how you can get the image representation of the pages in a Word document:
using GroupDocs.Viewer.Options;
// Set output path
string OutputPagePathFormat = Path.Combine("D:\\output", "page_{0}.png");
// Render document pages
using (Viewer viewer = new Viewer("D:\\sample.docx"))
{
PngViewOptions options = new PngViewOptions(OutputPagePathFormat);
viewer.View(options);
// Rendered images will be saved in the D:\output\ directory.
}
Disclosure: I work as a developer evangelist at GroupDocs.

Is it possible load a cshtml file in an iframe on non-cshtml page?

I'm working on an outlook 365 app for the web client of outlook. In outlook, you can define a button above the email that opens a panel when clicked. This panel is basically and iframe. The issue is, I need to point that frame at a cshtml file, which you can't do unless the page the iframe is on is also a cshtml file from what I understand.
My question is though, is there a way to load a cshtml file in an iframe on a page that is just a regular, plain html file? If the answer is no, as I suspect it is, is there a different way of doing this or is there a way to get around this?
I've searched high and low on google to try and even find an answer and there is nothing.
You can call the cshtml view through the asp.net routing
<iframe src="/controller/Action"></iframe>
if you want to be able to call views without calling actions
you need to override HandleUnknownAction
https://stackoverflow.com/a/8372820/1551411