Pure HTML Solution for a Dynamic Widget Using Forms - javascript

I need to create a HTML code snippet that I will distribute to third party websites. This code snippet talks to a php file on my server and contains a logic to update the content(image) after specified time intervals. The reason I cannot use JavaScript is that it is not search engine friendly.
The way I have it now is using an HTML+ Javascript code which includes an XMLhttp request and uses Ajax to call a PHP file which in turn reads a csv file and updates the banner image on the third party site. But it is not crawlable by search engines.
Any other way of getting this to work using HTML? Probably using forms?

HTML is not active. If you want to do something, you need some sort of scripting language. You can do this without using Ajax (XMLhttp). Before Ajax, it was a common practice to relay information to the server using dynamic image loading. Of course, the dynamic image loading required a script. It can be rather simple:
<img id='myimg' src='temp.jpg'
onload="document.getElementById('myimg').src='myscript.php?width='+window.innerWidth;"
>
Your script replaces the image with whatever you like, but you have information delivered from the web page to your server through the get string. Originally, I saw this used extensively to deliver rotating ads. With this, you can record which ads are shown along with information that would otherwise only be known by the web browser.

Related

Getting Input From HTML And Storing It In A File (Static Website)

I am trying to make a simple form submission in a GitHub Repository.
Basically what I want to do is take the input of an HTML Tag and then store it in another local file such as another HTML file or a text file without a back-end.
I understand that there was a saveAs function within JavaScript (however I read that it had been discontinued due to security reasons). Once I get the data stored in a file I would call it in the HTML page with the < embed > tag to show it on the page. So basically I want the Input on the page, and then when it is appended to the file, to show up on the same page again when the page is refreshed. My reason for doing this is to make a make-shift Google WorkSpace-like page for my production studio.
Here's a visual of what I want to do:
HTML PAGE:
Embedded File Contents (externalfile.html) Go Here.
Input: Input Goes Here
Submit
When Submit is pressed, it takes the contents within the "Input Goes here" box and appends it to "externalfile.html", then when the page is refreshed, it shows the updated content above the form.
I am not well-versed in JavaScript but I know JQuery a Good bit from making a few websites with Wix, but I do not know much native JavaScript nor it's functions. Any advice would be helpful. :) Thank you. I would be adding multiple input boxes and such on the page.
Hello and welcome to StackOverflow!
Now, if I got your question right, you want to append something to a file and read this file without using any backend? Then I must disappoint you, because there is no way JavaScript allows this, since it would be a tremendous security risk. The reason is, because any malicious JavaScript code on any webpage then could not only create malware files on your PC and dragging it to some start up folder, but also they would be able to read all the files and documents on your machine (without your knowledge!). So I think you see where the problem is.
For your task I recommend you using some kind of backend (i.e. NodeJS, PHP) and make things work with API requests and asynchronous JavaScript. Or you could serve your site with an ExpressJS backend and statically fetch the request and append its contents to a file. Then of course send an HTML file back with all the inputs the user made. The choice is yours.
Cheers

display external text from txt, html etc. (hosted on cloud) on web page

I manage a small web page for a relative's business. They want to provide notes on the page for the visitors regularly (opening times, news etc.) but cannot code the web page themselves.
Is there a way to embed a news scroller, text field, whatever on the page - however, the text displayed there then comes from an external source they can manage like a htm, txt, json (whatever) file hosted e.g. on their Google Drive that they simply need to change and see the edits directly in the web page (the file would be public; the URL to be embedded in the web page code).
Is there a solution or an easier way to achieve it? thx
You can use file_get_contents() if I got you right.
To achieve this, first you need to create a portion on the website to display the news or whatever external dynamic content you want.
Then you need to develop complete APIs for that site and then hit them from your website (Keep a secret key for safety). Your API can do everything you program it to do. (E.g You can put the news in database or create publicly accessible files through it)
When this is achieved, you can then fetch the data into the portion created for news etc. (automated through programming)
Using PHP you can achieve all the above mentioned steps.
That way you will just have to push/send the data from your APIs and the actual site will keep getting updated without any further action required.
Hope that helps.
If they can write the HTML and make it available at a public URL, you can simply embed it using <iframe> in HTML.

a website preview - loading a webpage using javascript Or Server-side

I want to show website preview on a link similar to facebook when a user post a link. my question has been repeated in the following link ,but I am going to ask specific information throughout my solutions. I have 2 solutions for showing webpage preview which are as follows:1. server side html process 2. client side html process.
1. server-side html process
I used System.Net.WebClient().DownloadString(url) to retrieve the web page data in server side , and I tried to extract the most important information in the page ,but in most cases, main part of the page loads using javascript , therefore I do not have access to that information.
Another solution in server-side html process is to work with webBrowser and WebDocument objects. because I didn't work with these libraries and I don't know how much the Web server performance affect by applying this objects , I only present this solution for discussion .Therefore are there any server-side html graber which fetch all html data including javascript loaded html source?
2. Client Side Html process
The simplest approach for client side is to use the iframe tag, but it has two following problems:
a. I can not access to innerHTML of the frame for the links on other domains.
b. I can not load https webpages such as drop-box and facebook in the iframe
because of "x-frame options" error.
My question is that, is there any other client-side solution to retrieve dynamic html source(loaded by javascript) from 3rd party webpages (usually https)? Or can I solve above problems with some tricks.
I guess server side approach would be most viable option. On client side you can use proxy services which allow to solve cross domain limitation, for example, crossorigin.
To generate a preview, similar to one Facebook provides, you need to get Open Graph information for target page. Libraries to process open graph data available for multiple platforms. OpenGraph-Net could be used on .NET plarform.

Can a 3rd party JS app submit HTML snapshots?

I am relatively new to the world of HTML snapshots and JavaScript so I apologize if this is not that hard.
The app we make at our company uses JavaScript to dynamically load image and text content on to a webpage. As you know, JS rendered content doesn't get indexed by search engines. However, I have learned of the otpion called HTML snapshots where you can feed to Google and other search engines all the rendered HTML of the page and it will consume it as long as you follow their guidelines.
My question is that since my script is a 3rd party script that can be embedded on x amount of pages, can I still somehow leverage HTML snapshots or will my clients need to do that?
Although I have not work with this technology yet, I believe it depends by your application and by whom create the data (your client server or you library).
If a lot of content is generated at server side level, server should creates the snapshot.
If a lot of content is generated/manipulated at client, client could creates a HTML snapshot. For example using HtmlUnit.
More info on this page:
https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

Fetching a HTML code or displaying the advertisement code from server/host

I have written a HTML code of 300x200 dimension. Now my client wants that the code must fetch from a server and show it to the site they add the code.
We need to add this advertisement to approx 30-40 sites and the content will be changed after 10-15 days so replacing he content on these sites again and again will be pain.
So, I am thinking on adding this code to server/host and fetching and displaying to the website.
I am thinking of using a js script. But I have no idea how I can achieve it.
P.S. I have search on internet but I am not getting a proper keyword or what should I search for.
Can you help me in this thing?
The code will be implemented on blogging websites and wordpress websites.
Thanks
Host your dynamic PHP page (which shows your advertisement) on your server.
Then you have a few options to display it on other websites:
Use JavaScript and include a .js file from your server (same php page, which outputs Javascript), and either use document.write or change the content of a div through a function
Use an iFrame and directly display the PHP page

Categories