Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
Related
I occasionally save tutorials from a website as a PDF file for future reference.
My current manual workflow is:
Click the "show on one page" link to get a full single page view of the article.
Open the DevTools of the browser and select sections with advertisements and related links with help of the inspect-functionality and remove them.
Print the page as a PDF file.
I used the Firefox or Chrome-Browser for this, as they both have the required functionality and behave very similarly in that regard.
I noticed that the content I want to remove to get a "clean print" of the content is mostly the same: Let's say all adds are embedded with a div with the class add-banner.
Is there a way to automate these steps?
One idea is to load a custom CSS file that I would need to prepare specifically for a site. Simple rules like .add-banner { display: none; } would allow me to hide the sections that I don't want to print.
I also took a look at console based scrapers because I like the idea to call a command with the URL as a parameter. But the tools I've discovered are image based and I want a indexable PDF file where I can search for text and select parts.
What is the best option to achieve this?
The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.
This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.
I am using the ionic framework and would like to be able to read from the HTML from the current webpage and then send the selection back to my application.
I have the Theme-able Browser Plugin setup and can use it like any other web browser.
I have tried looking at ways to include my own script with the .executeScript() function but no luck.
I have also tried to read data from custom buttons that I have inserted into the tool/nav bar but that gives me the HTML of my application.
TL;DR: (Basically want access to the DOM of the current webpage and have the user use native selection to read the document.getSelection() and send that text back to my application.)
Any help would be highly appreciated.
After browsing the forums on Ionic I found the solution:
browser.executeScript({code:'window.getSelection().toString();'}).then((selection)=>{
packet.text = selection[0];});
This allows me to get the selection.
I want to get the HTML code of a particular site. It asks me to register myself first so that I can be redirected to their home page. Now, my question is: is it possible to retrieve the HTML code of the desired page just by choosing option ‘View Page Source’ which appears on right click? Is there any other way to fetch the HTML code?
There are multiple ways of getting the HTML source code of a page
One way, as you already know is by viewing the page's source code.
If you Right Click -> View Page Source or just press Ctrl + U you will view the source code in your browser
If you are using linux, you can use wget to get the source code.
Just open up a console and type wget www.somewebsite.com and you will get the HTML source code along with any CSS and JS links.
However, you cannot get the PHP code using any method unless you have FTP access to the server
Yes it is possible to view HTML via 'View page source' or you could use PHP as mentioned in the comments.
'usign php yes php.net/manual/en/function.file-get-contents.php –
Vitorino fernandes'
You could also let a website and or program do it for you but it's trustability depends on the site and or program,
Do note it is NOT possible to view the PHP source since that is server-side.
Using any browser, the "View Page Source" option will show you the source of the page, as received by the browser (which may be different then the source currently displayed). You also have the option of using the File > Save Page As (or similar) menu option to save a copy of the html code of the page from the browser.
It is also possible to use command line tools like curl and wget to download the page to your local machine. Those tools provide options to send data (such as cookies or headers to identify yourself) along with the request.
I've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');
I am trying to add two html templates in one site one is normal and other for mobile devices.
I want that when someone see my site with mobile it show mobile template instead of normal.
Is it possible?
I discuss this other people they says install parallel site eg: m.atecharea.com and use config file for regular site and name the template file as in regular site . With this method everything goes correct except one thing data folder not loaded which is in root/ directory. They also suggest to change data path manually from this:
// Data paths
define('MEDIA_DIR', 'data/media');
to this
// Data paths
define('MEDIA_DIR', 'http://m.atecharea.com/data/media');
its not work, it shows data folder link like this
http://atecharea.com/http://m.site.com/data/media
its not work
Other person suggest to load wap template instead of default when view through mobile url.
Code is this:
if ($HTTP_SERVER_VARS['HTTP_HOST'] == 'm.atecharea.com') {
$config['template_dir'] = $config['template_dir'] . 'default_wap';
}
it didn't work either.
Please if some one guide to get data folder or second template folder anyone solution from these two will solve my problem
The question is not very specific so a suitable answer would be "Yes". You can try to detect the browser using the user-agent and then send the desired HTML back to the client based on that.
Also there are two widely used alternatives to that:
use an adaptive/responsive layout, meaning one layout that is built in such
a way that it adapts itself any screen
use a standalone domain for the mobile pages