See what Reddit uses to add one of its buttons:
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
This JavaScript adds an <iframe> to the page, then the <iframe> adds the HTML code.
Why doesn’t the JavaScript add the HTML directly?
To isolate the button's markup and style from the web site's own CSS rules.
This technique is called as unobstrusive linking of JavaScript. This is one of the good practices of designing a web-page with graceful degradation. The actual HTML doesn't carry any references to JavaScript, and JavaScript is not supposed to cause any content manipulation.
Another reason why the JavaScript is included at the end of file, is that the web page can show without waiting for the JavaScript to be completely downloaded. This is the exact complement to why CSS files are included in the beginning (to prevent content from showing up before styles are set.)
Related
I'm looking for a good way for webmasters to embed content from my website providing them with a simple javascript snippet.
Two things:
if I attached a stylesheet, won't it break theirs?
inline or attached CSS, their is still a risk that their style breaks mine?
what is the technique used by FB or Youtube to allow embed content, without using iframes?
Thx,
FB uses iframes.
You can make a content.html file you or other pages can load via ajax. Where content.html does not contain the whole page but just a content part. Like:
<h1>This is important</h1>
<p>here is some text.</p>
For example with jQuery you can place place a html file in a div like this: $('#result').load('content.html');
But I think it depends on what you want to share and to who. Maybe a REST API would work better in you case?
It's just an impression, but actually Facebook and other social networks do use Iframes. But they're created by their JS that you also have to embed, making the their tech choices more powerful. Later on they might update the JS and then get rid of the iframe in favour of something else.
However, currently, you embed a div with a given CSS class an a data-href, plus the JS. The script will find those divs .fb-post and fill it in with an iframe containing the post indicated by the data attribute.
If you want to make something simpler you might as well give your users an iframe with a responsive page inside it.
I usually create usercontrol which is referring javascript file/block. For example, I have a cascading Nation/City selection which is based on AJAX in my Register.ascx(a usercontrol), certainly I need add the javascript file into page. I have 3 ways at present:
1.Writing <Script> element in .ascx file directly, but it will bring nonstandard HTML structure due to many <Script> elements would appear in <Body>.
2.Writing <Script> element in aspx page which will use the usercontrol, but the father(aspx) rely on child(ascx), it's listening too bad.
3.Using ScriptManager or HtmlGenericControl to register file/block in head, but I'm worrying about performance of them, and it's a bit weird that I bring javascript to c# file.
Well I don't feel there is really anything wrong with having your scripts inside the body tag. In fact placing scripts at the bottom of the page is fairly common practice.
However if that concerns you, you may try putting all your scripts into a separate .js file and then call those functions from your control.
As far as the script manage, your probably right... I am sure that comes with some overhead.
It's a known fact that jQueryMobile loads pages with ajax and is not including in DOM the header content in every pages.
I need to load a custom js file in some pages, how can I achieve this? Until now I have placed the .js files in the body, but there are some problems with the code there too so it's not a good workaround. Until I can find a solution I will use the rel="external" workaround, but I really need to find an answer to my question.
You could try including the custom script within the data-role="page" div in pages where you want to use those javascript.
From JQM docs:
Another approach for page-specific scripting would be to include
scripts at the end of the body element. If you include your custom
scripting this way, be aware that these scripts will execute when that
page is loaded via Ajax or regular HTTP, so if these scripts are the
same on every page, you'll likely run into problems. If you're
including scripts this way, we'd recommend enclosing your page content
in a data-role="page" element, and placing scripts that are referenced
on every page outside of that element. Scripts that are unique to that
page can be placed in that element, to ensure that they execute when
the page is fetched via Ajax.
You could use some javascript to dynamically add the js file to the DOM.
This is demoed here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
I am trying to compare having a 1 page app with clientside routing to having a asp mvc app which just routes to html files, to see which is more appropriate for my current project. As I have no need for any Asp Mvc features its all javascript/html which communicates with a web service.
However one problem I can forsee with the one page app is that my site isnt really 1 page, so I would be having to have on main index.html which contained all shared resources. Then dynamically load in new pages based on the hashbang and add in any required scripts and css. This doesn't seem to hard as Jquery I believe provides a .load() method or something similar to get external resources... my problem though is getting rid of them once I am done...
Is there any way to do this, so you target ONLY certain script/link tags, can you give them Ids or something?
Any help on this would be great...
== EDIT ==
Added a simple example to show what I mean:
<!-- Script already in page -->
<script type="text/javascript" src="scripts/script1.js"></script>
<!-- Dynamically added script -->
<script type="text/javascript">
// some javascript
</script>
How can you tell which ones you should remove? If you could apply an id or uniqueness to each script then it may be ok, but thats what i am getting at with this question.
There are zero benefits to "removing resources." When a script has been loaded, removing the script tag from the page later has no purpose--it won't improve your browser performance at all, nor will it harm it to keep the files around.
Simply add your resources as needed and write your code such that it won't execute erroneously.
I'm not shre i understand why you would like to do that but link element (for css) and script (for js) are elements like any other and they can be deleted with remove().
I have partial control of a web page where by I can enter snippets of code at various places, but I cannot remove any preexisting code.
There is a script reference midway through the page
<script src="/unwanted.js" type="text/javascript"></script>
but I do not want the script to load. I cannot access the unwanted.js file. Is there anyway I can use javascript executing above this refernce to cause the unwanted.js file not to load?
Edit: To answer the comments asking what and why:
I'm setting up a Stack Exchange site and the WMD* js file loads halfway down the page. SE will allow you to insert HTML in various parts of the page - so you can have your custom header and footer etc. I want to override the standard WMD code with my own version of it.
I can get around the problem by just loading javascript after the original WMD script loads and replacing the functions with my own - but it would be nice not to have such a large chunk of JS load needlessly.
*WMD = the mark down editor used here at SO, and on the SE sites.
In short, you can't. Even if there is a hack, it would heavily depend on the way browsers parse the HTML and load the scripts and hence wouldn't be compatible with all browsers.
Please tell us exactly what you can and cannot do, and (preferably; this sounds fascinating) why.
If you can, try inserting <!-- before the script include and --> afterwards to comment it out.
Alternatively, look through the script file and see if there's any way that you could break it or nullify its effects. (this would depend entirely on the script itself; if you want more specific advice, please post more details, or preferably, the script itself.
Could you start an HTML comment above it and end below it in another block?
What does the contents of unwanted.js look like?
You can remove a script from the DOM after it is called by using something simple such as:
s = document.getElementById ("my_script");
s.parentNode.removeChild(s);
This will stop all functions of the script but will not take it out of user's cache. However like you wanted it can't be used.
Basically you can't unless you have access to the page content before you render it.
If you can manipulate the HTML before you send it off to the browser, you can write a regular expression that will match the desired piece of code, and remove it.