I am converting an existing HTML to AMP-HTML. In older HTML I am loading footer and header which are in separate HTML files which are loaded by using jquery as mentioned in the below code.
$("#divHeader").load('../header.html');
$("#divFooter").load('../footer.html');
These HTML have only static data. Is there any way to add these HTML in AMP pages? I cannot use amp-iframe because amp-iframe cannot be within first 75% of the viewport and has to be 600px away from the top as mentioned in this link.
AMP cannot contain any type of external stylesheet or scripts. For your HTML file, you might have used the HTML partials to load. But in the case of AMP pages, you cannot include that, you have to explicitly write your header and footer in AMP
In the official doc here, under the HTML Tags heading it is specified that
Scripts are Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) An exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components
If your are using PHP, or you're able to convert your pages to PHP, you can use an include or require statement.
<?php include_once('path/to/file.php'); ?>
<?php require_once('path/to/file.php'); ?>
The main difference between include and require are include will output an error if there is one and continue rendering the page. Require will stop at the error. The _once just makes sure it gets called once per page load. Not really necessary usually but I typically do it just to be safe.
It might be possible using amp-iframe or amp-list but other than that it is not possible.
Make two different HTML files where one stores the header and the other file stores the footer. Try loading them separately utilizing amp-iframe or amp-list. I tried doing this stuff personally but couldn't do it but I know some people have done it in the past.
All the best.
Related
Question is in the title. I have a load of code that needs to be mimicked on every page in my website, and want to centralise it into one document and have a single command to call it instead of doing this. It came to light as a problem recently as I needed to change something and now I need to double check to make sure it is changed throughout the project, which I can only assume will involve me missing at least one page.
I originally was doing this locally using php include "a_document.html"; but I need something that uses either html or js.
I have tried using an <object> but that doesn't work as you can't load an object inside the <head>. Apparently there used to be an include tag for html but that has been depreciated it seems?
I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.
I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.
Can I do this with four different Meteor templates?
The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:
Template.templateName.onRendered(function() {
$('head').append("insert your script here");
});
So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.
Ok so on W3Schools, it has the image below. Is there a way to keep the outer orange/yellow part and simply replace the "Content goes here" by doing src="somehtmlpage.html" which contains only a body or whatever?
I know I can do it with a Frame/IFrame but I read somewhere that Frames aren't good or something like that.. Any ideas?
You're right, frames are not a good idea, but if you want an html solution that's what you have to use.
However, you can load content into that div using javascript. I recommend using jQuery's .load() method for this task, as it will streamline the process for you and allow you to select specific content from the source file.
There are Pros ad cons of usig frames
Pros
Ability to keep one part of the page static whilst changing
another part. For this reason frames are often used for navigation
menus.
Frames can also help reduce bandwidth and server load, because
the same content does not need to be loaded every time a new page is
visited.
Cons
A broken frameset happens when the frames are not loaded or
displayed correctly.
Search engines don't deal with frames well.
You can't link directly to a framed page.
The same problems related to links also apply to bookmarking pages.
Iframes can e give a trial. It works well too for some limits
you can use JQuery load function to load data from a HTML file in a specific element
see the link below
Jquery load function
good luck
If you want to add some html code from a different file, you could use php include
<?php include('somehtmlpage.html'); ?>
Dont forget to rename the file index.php or test.php
eg, If you wanted to have a template and a file for the main content:
main.php
<h1>title</h1>
<?php include('somehtmlpage.html'); ?>
somehtmlpage.html
<p>something...</p>
The page will look like this:
Title
something...
I am new to html. I am trying to attached multiple html page on the server (in the memory) and send it back as one page to client (asp.net mvc 3) but my html source tags are mixing up with each other (resulting into wrong layout) if one of my html source content has not closed the tags properly and does something funny with its layout.
How can I do this such that each html content is displayed independent from other html contents one after each other?
EDIT: I should have mentioned that I have no control over the source html content that I need to attach together so it the source html is wrong, it will come to me wrong!
Short of having separate documents, fetched by separate HTTP requests all viewed in (i)frames — you can't.
Write code that doesn't output invalid HTML instead.
I am also new to html and have dealt with this kind of problem simply by changing my code editor. Try using one that highlights the start and the end of the html tag. Personally I use Komodo IDE or Notepad++.
Is iframe should not be used ever?
how screen reader behaves with
iframed content?
Without iframe how we can embed any
PHP page into asp.net based site?
What are cross browser alternatives?
I don't see why using an iframe is a problem.
If you can't use it then you could either use javascript to download and insert the generated html from the php page, or you could download the html in your asp.net server-side code and insert the html in a control.
Either approach should work well, but using javascript across domains is difficult.
If you go for the asp.net server-side approach you could do the following:
First insert an control where you want to include the html from the php page
In your Page_Load event use the WebClient to download the html as a string
Remove the <html>, <head> and <body> tags so that you only have the pure html markup. You may want to add any script- and css-references to your page if they are needed.
Assign the cleaned html to the Label controls Text property.
This will work, but there are a few points to make:
First you should consider if you trust the source of the php page. If you don't then you will want to do some extra cleaning of the html before displaying it
Second, you will probably want to cache the downloaded html so that you don't have to download it for each page view.