I am trying to have node red go to my router IP and search through the HTML code to see whether a certain device is on the list. When I right click - inspect I can hover over the list I am interested in and see the HTML information I am looking for. When I use the HTML node it seems to only look through the view page source information, which does not have what I am looking for. I there a way to point the HTML node at a more specific element instead of the page source as a whole?
It sounds like the data in the page on your router might be dynamically generated using JavaScript.
This means that when the page is loaded it only has the outline and the rest is filled in by the code using XHResquests to a different URL that supplies the information.
In order for Node-RED to be able to extract the information from the page it would need to load the outline, then effectively run all the JavaScript. Libraries like PhantomJS
There is a contrib node that might be able to help node-red-contrib-nbrowser but the better approach would probably be to work out what URL the JavaScript is calling and calling that directly as the data is most likely to be in a format that is easier to process (e.g. JSON)
Related
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)
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 have created a page in DNN 7 and added the standard feedback module available at Codeplex to it. Now I want to link to this page using a hyperlink in the middle of another page (not from a menu).
I am able to see the URL for the feedback page via the admin pages and it seems to be consistent. So the obvious way would be to use the HTML module and simply hardcode the URL. But something feels wrong about that. I thought of creating a simple module, encapsulate the hyperlink and surrounding text in a control and use NavigateURL to obtain the URL for the feedback page. Unfortunately, I have not been able to figure out how to do that. I have seen a lot of information about getting the URL for other controls within the same module and even using ModuleID but nothing that would help me implement the code for getting the URL for a particular page at my level of experience.
Sorry about the long intro but I was wondering if it is good practice to hardcode the URL and if not how to programmatically obtain the URL for the feedback page.
TIA
The first argument to NavigateURL is TabId (pages are called tabs in the DNN API). To get the ID of the Feedback tab/page, you'll want to call a method off of the DotNetNuke.Entities.Tabs.TabController class; I'd suggest the static method TabController.GetTabByTabPath(portalId, tabPath, cultureCode), so something like this:
Globals.NavigateURL(TabController.GetTabByTabPath(this.PortalId, "//Feedback", string.Empty))
You're still hard-coding the path to the page here; you could have a setting, which would let you pick the page, but that seems like a bit of overkill for a simple link. The main benefit that you would get by hard-coding the path, but still using NavigateURL is that any changes you make to how URLs are generated (e.g. upgrading to the Advanced URL Provider that comes in DNN 7.1) will happen automatically.
Most folks don't worry much about programatically generating links in HTML content.
As the title states, I am wondering if there is a method to obtain the generated HTML code of a page. Obviously I can inspect the page with web developer tools (browser built-in, or external program) and get it, but I would really like to do it automatically. Perhaps using Fiddler's API it could be possible?
Thanks!
"Source" doesn't get altered by JavaScript after page load, it's the document object model (DOM) generated from the source that gets altered. It is this DOM that is then translated to the GUI, and is altered with every change as long as the page is not re-loaded.
The DOM is not a string of HTML code, it is an in-memory hierarchical object representation of the page. The browser does not maintain an up-to-date, flat-file representation of the DOM as it gets altered, which is why when you "view source" you only ever see what was originally sent to the browser over HTTP.
The node-for-node representation of the page/DOM, in developer tools such as Firebug is the closest you'll get to a re-generation of the source code (AFAIK) without building some new tool yourself.
You may be able to write a script in Python that would take a variable (the URL) and insert it after a command that would download the webpage, such as wget.
Googling it, I have found this to parse HTML files: maybe you could wget the index.HTML and use one of these:
How do you parse and process HTML/XML in PHP?
I have been trying to locate an example of remote Javascript execution from a local HTML 'a' tag. This is not going to be a malicious execution. On my index page, I use Javascript to hide divs and bring a single div to the front - in order to have multiple pages on one (in a nutshell). I typically do this using the following example snippet:
About Us
However, on a different PHP/HTML page on the same site, I would like to have links that will execute the Javascript in the same fashion, only after pushing the browser to the new HTTP request. For example, in my inept-thinking, I would expect it to work like this:
About Us
This was a failure - as my Firefox renders the hyperlink as plaintext, and not clickable. I've scoured Google and this site for info, but found no examples. I would appreciate any feedback.
Thanks.
My understanding is that you want to invoke the same JavaScript function in multiple pages. How about using the script src tag as follows:
<script src="../common.js"></script>
I believe the src attribute can be a remote js file, but haven't tested it out.
Therefore, no matter what page you want to use the JavaScript to show the about us footer, you can have the same link:
About Us
So... you want to have the browser navigate to http://samedomain.com and then execute javascript:footerAbout()?
How about passing an argument as part of the address? Something to the effect of:
http://samedomain.com&show=footerAbout
http://samedomain.com#footerAbout
Then reading the URL in your destination page and letting the destination execute footerAbout()?