I am developing a system where I will display content in a browser in an embedded application. The normal browser navigation controls cannot be used but instead will have javascript running in a wrapper round the page. The content will be coming from the same domain but I cannot pre-process the content. Needs to be compliant with IE8+ and latest of FF and chrome.
The things the javascript needs to do are..
Load in new content
Detect when the content has fully loaded
Set focus to elements
Detect which link currently has focus
Retrieve lists of links on the page
Trigger links
What is the best way to place the content html pages within the wrapper page? eg
frames
iframe
div
Both iframes and divs could work. The final choice will depend on the details of your implementation, and is also a matter of personal taste.
With divs, the html becomes part of your wrapper page. The risk is to have conflicts between the inserted content and the rest of the page (css, html ids for example).
An iframe creates a sandbox and avoids conflicts. The downside is that the layout is not easy to adjust as the content lives in its own document. html5 introduces new iframe attributes like "seamless", but they won't work in IE8.
As above, Iframes may be best; however they are deprecated and don't always give the best results. An alternative would be to set a div for the content, and Ajax the content into the frame. You can then access it through the dom to get links etc.
To decide which would be best I would consider what content is being loaded - full HTML documents (with doctype, head, metadata etc) will be problematic without I frames.
If the content being loaded is just plain text, maybe with a few basic HTML elements, I would ajax it into a div
Related
I have a website that I update some of it's content on monthly basis.
The content for those pages include tables in iframe format. Now when I search for that particular keyword i see that google is indexing my iframes individually.
Therefore their contents doesn't add any value to the main parent container.Below you'll see one the pages with iframe.
http://www.reguluspc.com/parts/case.html
I want to keep the content intact but keep the table in iframe and update the table only. To avoid duplicated content, I keep the iframe but it doesn't look good as it doesn't have any navigation or proper CSS file.
Any ideas how to make the iframe content to be indexed as part of the main parent page?
Cheers.
As these are two separate urls, they will be indexed as separate content.
Why are the tables being loaded from iframes? Do you have any server-side languages like PHP, JAVA, .NET, etc? Your might also have *.shtml which would allow you to do server side includes for content like that.
Have a issue with performance while injecting a glob of content into a view page. The markup can get rather large. I did a test using an IFrame to load the content from a temp file and directly by setting the html and the performance is much better than using the jquery .load() or html(). However, everything has already been built around loading into a div and I am trying to avoid IFrame.
NOTE : I am making a hunch that there are some operations going on when injecting the content into a dom that you don't get when loading into an IFrame. Similar to if open a 2.5 mb html directly in the browser it loads almost instantly, meanwhile, loading 2.5 mb into a div using jquery doesn't offer the same performance.
Are there any tricks I could use that would allow .load() to perform better?
Edited: Added code:
The question is rather straight forward. I am getting a payload from an ajax call that is either a url or raw html. I am then using either
element.html(content)
or
element.load(content)
based on whether the content is a url or markup.
When I change the element to an IFrame and then use either
element.attr('src', content);
or
element.contents().find('html').html(content);
The content loads much faster.
Assume you have 75 div's that have data-id="{some number}" attribute. The overall page size is unfortunately big, very big.
There are many repetitive HTML snippets in my HTML document like image tags or links. These images/links' only changing portion is the id.
The HTML document is quite long, these snippets contribute to the overall size of the document.
I can run a javascript when dom is ready, but the user experience will be:
- wait the page loads, and start seeing nodes etc,
- page loads,
- extra snippets show.
I can make the top container DIV to hide until the page loads but
- worried that google search bot could realize the div is hidden and skip the content (or does it?)
- the users won't be able to see the content while the page is loading.
What ideal is to load the page in HTML without much extra markup for google search bot, and add extra elements while it's loading with javascript.
Any tricks that I can try that comes to your mind to accomplish this?
Thank you.
The best performance and user experience is to do as much work as possible on the server, then send efficient HTML and allow the browser to display the page as it's received. Sending say a single DIV container, then using script to clone it 70 or 80 times will be slower (probably a lot slower for some users).
Hiding content completely until your script has finished is the worst solution - users are left with a blank (or minimal content) page, waiting for something to happen.
The vast bulk of most pages is script and images, replacing HTML with scripting really is playing at the margins. e.g. this page has 90KB of HTML and 264KB of script, images and css. Apple's home page has 12KB of HTML and around 800KB of script, css and images.
Browsers show content progressively as it's received because that's how they evolved over many years on the web. Users prefer to see something rather than nothing, and to start viewing content while the rest loads (it's all about the content, not about fancy layouts or effects). Try to work with browser behaviour and features rather than against them.
You can greatly help the browser by specifying sizes for images and having an efficient layout. That way the layout won't change much as new content is received.
Depending on other page content, you could run your script on DocumentReady as opposed to onload.
DocumentReady runs after the page downloaded and the DOM rendered, but before images are retrieved.
I believe that there is an official DocumentReady event somewhere, but I still have to support IE6 on my pages, so I use a busy loop to watch the DOM.
I would like to use JavaScript to do the following:
Build an XML file
display it in an iframe
manipulate the content through DOM
I'm building an XML editor and am having trouble displaying the xml in an iFrame.
this is the code that I'm using at the moment.
function previewContent(what){//changes the content of an iFrame
var tsite = document.getElementById('xmlinside').contentDocument;
tsite.open();
tsite.contentType('text/xml');
tsite.writeln(what);
tsite.close();
}
function makeXML(){
var tester = '<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\
<bookstore>test</bookstore>';
previewContent(tester);
}
without the tsite.contentType('text/xml') the iframe simply displays test.
when I check the source it's still in HTML with the added line <bookstore>test</bookstore> added and the xml version as a comment.
I would like it to display like a browser without a stylesheet. I know Safari displays it as a raw xml file if there is no formatting associated with it. This would be perfect. Is it the content type that is messing up? That's why I tried changing it but this is the wrong code. Any help would be great!
A few things to keep in mind...
1.) If it's content loaded via AJAX you will need to use the application/xml media type/mime and the first element has to have a namespace...
<div id="root_most_ajax_element" xmlns="http://www.w3.org/1999/xhtml">
<p>ajax content</p>
</div>
2.) Never use innerHTML (and frameworks as they rely heavily on innerHTML) and most especially never use it in conjunction with loading AJAX loaded content, the proprietary Microsoft method does not correctly register the DOM so you sort of see that the code is there but it's not really there thus making your code wholly unreliable at that point. If using JavaScript use the importNode method to load AJAX loaded content (instead of using an iframe, you can import it to a division element instead).
3.) You won't (and shouldn't) be able to access (X)HTML of an iframe if it's not loaded from the same domain so if it's being loaded from a third party website forget about it otherwise you could say manipulate the text and discover their information (phone, email, etc if they're signed in to something).
If you meet those three conditions you should be able to work with code as if there were no iframes or AJAX involved to begin with.
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.