Is it possible to use 1 JS file for 2 HTML? - javascript

I'm trying to write JS code so that when a button is pushed in the first HTML page, in the second HTML page some content is displayed. I tried to do it in one JS file but it did not work, so I'm asking if maybe I have to use two separate JS files and in that case how do they communicate with each other? I'm using jQuery.

I'm not sure if you mean that two HTML pages are of the same website or they are two pages apart.
But if you mean the both are of the same website, I advise you to do the functionally of the page 2 on a div in page 1 and then only change the content dynamically by clicking the button on page 1 by jquery. "append()" function must be very usefull for this.
If the two pages are not related and they are of the same website, you can pass a JSON to the LocalStorage and then use it in page 2 by appending the JSON values between the html tags.
Whatever, if the two pages are so different or are not of the same website, you have to develop a websocket with "socket.io" or just use another "listener" library (like "datatable" for jquery) to show the data dynamically in page 2 in the case data comes from a db (should be the best way).
Please let me know if this is usefull or how can I help more.

Related

Is it better to have a single .js file or copy the script in every page?

I'm building a website which uses three, identical JavaScript functions in a lot of HTML pages.
Is it better to link all the pages to a single .js file or copying the script to every HTML page which uses it?
I recommend putting the script into a separate file and link to it. If you want to make changes to the code, you only have to do it once. => Removing redundancy. On the other hand, you reduce the amount of requests to the webserver, because each script tag will create an extra GET request. But I gladly pay this price for low redundancy!
I prefer to use one file and link to it.
But if the functions are pretty small google will be happy if you put them in the footer of your page directly above the body tag. I would do this only if you use a template where you have one footer for all pages and don't need to edit every single page.

Trouble inserting a javascript variable into an HTML tag [duplicate]

I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.
You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).
You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.

Website: Same universal menu on different pages

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

How to save part of an html page to an image or pdf either on client (javascript) or asp.net on the server side?

Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/

Loading external content with jquery or iframe?

Hiho,
There's an existing website that i need to include into another site which goes like this:
a.mysite.com
and i need to fetch content from this site in my
www.mysite.com
website...
As i need to access the content of the iframe the Same origin policy produces a problem here.
What i did was to configure mod_proxy on Apache to proxy pass all requests from
www.mysite.com/a
to
a.mysite.com
This will work fine...but my problem is that im not sure what the best way would be to include those pages.
1. Idea
As the content of the iframe is a full featured site with a top navigation...left navigation etc....i would need to change the page template to only show the content box to be able to integrate that page in the iframe.
2. Idea
I could just load the DIV where the content lies through JQuery.load() and integrate it into my site.
What is the best way to accomplish such a task? How bad is both ideas from the SEO point of view?
Unless it involves significant rework, the best solution is to combine the two into a single HTML page on the server side (using server-side includes).
Advantages:
No problems with SEO as it's delivered as a single page. Content in iFrames and content loaded via AJAX (with an associated link in the HTML) are traversed, but only the link, not the content itself is associated with the main page. See: http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
Faster page load - either of your suggestions will cause the main page to be loaded first before the other content is loaded.
No reliance on Javascript - your second method will fail completely if javascript is not supported / turned on.
Include all JS and CSS only once - your first method will require these to be duplicated in the <head> of each page. This is more of a long term advantage if you wish to achieve full integration of site "a". However, it can be a disadvantage initially, see below.
Disadvantage:
May cause conflicts with scripts and CSS between the two pages. However, this same problem exists with your second method.
If you must choose between either of the two options you proposed, I would not select the second as others have suggested. Significant amounts of static content should never be loaded via Ajax, and in this scenario gives you no additional benefits. At least iFrames guarantee no JS and CSS conflicts.
Use the 2nd approach (jQuery.load) and if you're working with HTML5, for browsers that support the History API you can change the URL to whatever the content is for that div.
Check out https://github.com/blog/760-the-tree-slider for an example of how github did it for their tree slider.
EDIT:
I am not sure how using an iFrame whose src points to your own domain affects search rankings but at best it's a grey area. I would assume that possibly some pagerank would trickle from the parent to the child but I have no clue how it would work for instance if a blogger linked to your page with the iframe that pointed to another page. This would be a pretty good question to ask at the Webmaster Help Forum
Always say no to iframes. jQuery+Ajax all the way.

Categories

Resources