I'm programming in Javascript and PHP. I've created a simple website that allows to fill in a quizz and get result. Now I would like to give users opportunity to embed this quizz on their website. How to do this? It should work in some near manner like Google Gadgets, Adsense and that: that so when someone will put my html code (with JS?) on their websites, quizz will display and work on their site.
Do you know any tutorials about doing such things or tips for me how to start searching and learning about it?
The easiest way, which is also best performance- and security-wise, is to use <iframe>. Just create small version of your page for embedding.
<script> is loaded synchronously and gets access to site's cookies, so it's not a good solution for embedding.
If you just ask your users to embed <script> in place where they want the gadget to be, you'll be able to generate markup with document.write (easy, works in HTML only).
A better way is to ask users to invoke function from your script that inserts code into selected DOM node (using W3C DOM). This allows smarter webmasters to load script asynchronously. SWFObject is designed like that.
If you need to use PHP you could tell your server to parse a .js file as PHP:
<Files quiz.js>
ForceType application/x-httpd-php
</Files>
In the quiz.js file, use PHP code to retrieve questions from a database or whatever. Then, set mime-type headers to Javascript and output Javascript code.
Though as porneL says, using an iframe is simpler. That's what Google Gadgets does.
Related
I've a web working on a web page that's basically just a big table of links. I use javascript to read from a text file, parse it, and create a table based on that.
I'd like to be able to have a button on the page to add new a row of links and add them to the text file (or another file type if it's better).
I know you can accomplish this with php, node.js, and others, but all the methods I've found require server software to be running. Is there any way around this? For example, is there a way to use javascript to call a python script, or any other way?
The page is just for personal use, so I'd like to avoid running server software just to use it if possible. I know you can set it to download a text file, and you can save it in the same location, but I'd also like to avoid that.
From the research I've done, it doesn't seem possible, but I just thought I'd ask before I give up. Thanks in advance.
You can only read from files locally in browser with javascript.
This would be a huge security vulnerability if scripts in browsers could write files to your machine.
For a little context I'm working on a site for a client and it has to run completely offline. It's just a set of html/css/js files that you run locally. The computers it will be used on are office computers and quite locked down so I can't even use java. Luckily the project isn't overly complicated and I've accomplished most of my goals with this limited platform. The issue I'm having is I want to create some easy to change files to load the data from. Right now I have all the data loading through script tags that point to js files that can be manually edited, however I've tried to make the javascript as simple and straight forward as I can but it's still not looking very friendly to someone who hasn't programmed before.
What I would like to do is include an xml file or text file in the HTML using a script tag or something similar and then use JS to read the contents but every time I try this it doesn't actually load the file. Here's a few things I've tried:
<script type="text/xml" src="myxml.xml"></script>
<script type="text/plain" src="myxml.xml"></script>
I've tried using XMLHttpRequest but most of these attempts end in the same result.. can't do a cross-site request. Even though I'm using a url "myxml.xml" and they're in the same folder, chrome is still convinced this is a XSS attempt. So I'm starting to run out of ideas. Can anyone think of any clever way to achieve this?
IF you're goal is to just run your web-app, even offline and you do not care about cross-browser compatibility, you can consider to convert you're application to Packaged App.
It will work only in google-chrome browser but setting the right permissions, you should not have problem with cross-site requests. At this point, you could download the xml content through a noraml XMLHttpRequest.
This gets somewhat complex, so first, a little background:
We're redesigning a video platform that we use across internal applications and our customers use as well for video delivery. The goal is for our customers to be able to embed stuff easily to put it on their own sites, as you would expect. Thus far, we've given a one-line script tag to do this, like so, which drops a player on a page:
<script src="http://vod.nimbushd.com/player/player.ashx?mediaItemAssetId=8413adeb-6b15-4606-a771-637527539093&h=480&w=720" type="text/javascript"></script>
Sample Page with the script above
This is just an ASP.NET handler that returns some Javascript, which, in turn renders some HTML for the player.
That works well enough for a player, but now on to the redesign.
We're now targeting different players for different browser types, HTML5 fallback in the absence of Silverlight, and some other bells/whistles. One of our big feature requests is to be able to serve up a player with add'l video gallery, Disqus comments, Twitter/Facebook share/like buttons; basically, regardless of the philosophy that these are things that should live natively on the customer site, we need to be able to design more complex features and serve them up the easiest embed-style possible.
I guess one school of thought is that we almost need an iFrame that behaves like embedded content (no scrollbars, sizing, and so on).
We're tossing around ideas like more complex Javascript-rendering HTML that could get impossible to maintain pretty quickly, whether advanced features should just be Rich content (Silverlight/Flash), or if there's some in-between like a jQuery partial page refresh or something.
Hoping to learn from some folks who have already gone down this road - as an end-user, how would you expect to embed content, and as a content provider, how do you serve that content in embeddable form?
Personally I would prefer a one line script to include for this
<script src="..." type="text/javascript"
data-container="someId"
data-otherParam="..."
data-beforeLoad="someFunction"
...
></script>
Passing all the configuration options in as html5 data attributes would be the most convenient. It would also be great if we can pass in a function name that you would call to give the end-user even more control where necessary.
As for what your actual code does. I would recommend you have the script do all your logic and have it make JSONP calls to a webservice to get any data it needs. As for the HTML rendering I recommend you use any templating engine and reference a templating file directly loading them from your server either directly or over JSONP if neccesary.
As for embedding your actual data/html pick a <div> or create a new one and render partial templates to the children of that <div>.
Alternatively you go down the easy route and just ask the user to embed an <iframe>. This solution isn't as nice.
Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.
I had read that SEO is applicable for static website, which holding the information in the initial page itself. Is it possible to get search engines to index the dynamically added information?
I used AJAX for loading information. In this situation how can I optimize a site for search engines?
You have to make all your content accessible without javascript (ie. ajax). Otherwise the search engine spiders cannot index your content.
The proper way to use javascript and Ajax is to first code your pages and delivery content without javascript. All content should show in a logically organized manner. Once this is done you can use JS/Ajax to provide superior usability to the visitors who have JS enabled.
That will benefit all your users, javascript enabled and disabled, and the search engines.
As long as each page has a unique URL (either by url rewriting or by query string parameters) and uses that to drive the content being displayed SEO will work.
I've done this a number of times in the past.
Ensure that your content is accessible to clients without JavaScript. You may have JavaScript on your pages that changes the content based on the URL.
I don't really know about this, but IMHO, using semantic markups and submitting sitemap to Google helps a lot.
You can create a website that has AJAX and is search engine compatible but it must be created such that the same information can be accessed without AJAX through the same URL. Search engine cannot execute Javascript and as such any content only available through Javascript will be inaccessible to the search engine.
You need to either provide this content within the <noscript> tag or within the page by default and have the Javascript hide it for your AJAX version.
You cannot deliver a different page to a search engine such as Google as they will generally crawl a page both as their bot but also masking as a user by sending a user-agent string purporting to be say, Internet Explorer. This is their method for ensuring you're not trying to game the search engines and they're seeing the same content as a regular user.
To solve this problem I have create a sitemap of the site.
For example, in my sitemap I have
www.example.com/level_one/level_two/page1.html,
www.example.com/level_one/level_two/page2.html,
...
So the crawlers (Google, yahoo, Bing, etc) knows what to look for. But when an user goes to www.example.com always use pure AJAX site.
So you need to acces the pages in the sitemap like a static site.
Other way to solve this (more work) is to make page compatible without JavaScript, so if the user can execute JavaScript you rewrite all href to "#" (for example)
Please check: http://www.mattcutts.com/blog/give-each-store-a-url/
SEO ultimately is based on have a good site.
Things that will help you are links from other "good sites", Having descriptive friendly, URLS, page titles and H1 headings
submitting sitemaps to google and using there webmaster tools is a great starting place