In our webapp, we would like to be able to show different content at the same URL based on the host from which the site is opened. E.g https://localhost:44300 will behave differently depending on if it is opened from within a browser or an office js taskpane.
While that is the case, we would like not to include the office.js javascript until we know that the website is accessed from within an office js taskpane. Therefore it is also not possible to use Office.context.requirements.isSetSupported.
The way we do it at the moment is by looking at the URL since it includes the _host_Info. As an example we make the following check right now
if(window.location.search.indexOf('_host_Info=Word') > -1) { /* initiate app for word js addin */ }
Even though this works, it doesn't seem to be a good solution - especially if we want to navigate to other pages on the website. We therefore hope that there could be another way that the Office js host could be detected without having to include Office.js script beforehand
The scenario you describe is not supported -- and truthfully, I wonder how often it is that you want to use the exact same site both as an Office add-in and a standalone website. What we've most often seen is that people will re-use some of the same common libraries and CSS, but have different html pages for each scenario.
Note, too, that when run as an Office add-in, the page must include a reference to Office.initialize. This again makes it hard to re-use the same website contents for both an add-in and a standalone site. So my recommendation would be to refactor and share what you can, but have 2 separate html presences.
Hope this helps,
~ Michael Zlatkovsky, developer on Office Extensibility team, MSFT
Related
To start things off, I have basically no javascript experience and I am trying to modify a pre-existing .js file used in my office to quickly open up several web pages from one file. It is really helpful in a quick start, and though it was written by a different person who is, unfortunately, no longer around to maintain the file, I have been able to keep it up to date with the changes that happen around here.
The downside is that the script exclusively opens the pages in IE, and there are a couple of links that I want to convert to opening in Chrome instead as they run much more efficiently there. So far I haven't been able to find the right way to code it, nor the right sort of variables/definitions to use. The original script is as follows (page addresses removed, of course, minus the last one to provide reference);
var navOpenInBackgroundTab = 0x1000;
var oIE = new ActiveXObject("InternetExplorer.Application");
oIE.Navigate2("http://[address]", navOpenInBackgroundTab);
oIE.Navigate2("http://www.carfax.com/", navOpenInBackgroundTab);
oIE.Visible = true;
this section edited to update on issue progress
The .js file being used is a stand alone file resting on the windows desktop and is not being run within or embedded as a part of any html environment, and calls on using Active X objects to function. It has no user interaction other than your basic .exe style double click and it runs. Thanks to your assistance and suggestions so far it has been established that Active X does not connect/utilise Chrome unless an additional plugin is downloaded (ActiveXobject). I have been unable to clarify if this plugin allows chrome to utilize activex within the environment (IE; a web authoring tool), or if it allows activex itself to call on chrome as a valid object. However it is nonviable as a solution due to admin restrictions in my situation.
My question is now one of alternative ways I can target a link to chrome, such as through old-fasioned html coding or a javascript version thereof that would let me call a link and set a target without using axtiveX. Is this possible/does code exist that can be used within the same .js file without mucking things up? (preferrably something that can be done in one or two lines. I don't have the skill to be writing my own libraries. ... Also, I am lazy. ¬_¬)
I'm quite sure that you get the same result by calling window.open("website url", "_blank") multiple times, using Chrome.
It might give a warning that the page is trying to open other pages, but since it is from a "trusted source", you can disable this warning and it'll not annoy you anymore.
I just did a proof of concept/demo for a web app idea I had but that idea needs to be embedded on pages to work properly.
I'm now done with the development of the demo but now I have to tweak it so it works within a tag on any websites.
The question here is:
How do I achieve this without breaking up the main website's stylesheets and javascript?
It's a node.js/socket.io/angularjs/bootstrap based app for your information.
I basically have a small HTML file, a few css and js files and that's all. Any idea or suggestions?
If all you have is a script tag, and you want to inject UI/HTML/etc. into the host page, that means that an iframe approach may not be what you want (although you could possibly do a hybrid approach). So, there are a number of things that you'd need to do.
For one, I'd suggest you look into the general concept of a bookmarklet. While it's not exactly what you want, it's very similar. The problems of creating a bookmarklet will be very similar:
You'll need to isolate your JavaScript dependencies. For example, you can't load a version of a library that breaks the host page. jQuery for example, can be loaded without it taking over the $ symbol globally. But, not all libraries support that.
Any styles you use would also need to be carefully managed so as to not cause issues on the host page. You can load styles dynamically, but loading something like Bootstrap is likely going to cause problems on most pages that aren't using the exact same version you need.
You'll want your core Javascript file to load quickly and do as much async work as possible as to not affect the overall page load time (unless your functionality is necessary). You'll want to review content like this from Steve Souders.
You could load your UI via a web service or you could construct it locally.
If you don't want to use JSONP style requests, you'll need to investigate enabling CORS.
You could use an iframe and PostMessage to show some UI without needing to do complex wrapping/remapping of the various application dependencies that you have. PostMessage would allow you to send messages to tell the listening iFrame "what to do" at any given point, while the code that is running in the host page could move/manipulate the iframe into position. A number of popular embedded APIs have used this technique over the years. I think DropBox was using it for example.
I'd like to use some Javascript on my wiki pages, but I haven't been able to figure out how. I'm using a hosted solution on Wikia. So I am unable to modify the installation, add extensions or hack the settings. But I have admin rights on my wiki so I can access the MediaWiki namespace and MediaWiki:Common.js.
The javascript I want to use (Tangle) will consist of an external script that will be common to a number of pages(but not all pages in the wiki) and some code that will be specific to each page, the kind you would normally put inline in the <script> tag.
The trouble is, Mediawiki sanitizes <script> tags, and I haven't been able to find a way to put them in. I'm trying to make this into an editor-friendly setup that will be used across the wiki, so I'm also trying to avoid hacks and find a proper solution.
Update: New problem
Apparently MediaWiki also sanitizes the HTML5 data attributes, which Tangle relies on heavily. Any ideas on solving that problem is very welcome.
MediaWiki doesn't allow <script> tags in pages for obvious reasons: if it did, anyone could use them to inject JavaScript into your wiki and e.g. steal login credentials.
There are a couple of things you could do:
Write some generic JavaScript code to extract the parameters from something that is allowed on MediaWiki pages, such as a hidden <div>. Be careful not to introduce security holes when doing that.
Add something like this to MediaWiki:Common.js:
importScript('MediaWiki:Tangle/' + wgPageName + '.js');
Then, whenever a user visits the page "Foo", the page "MediaWiki:Tangle/Foo.js" will be loaded as JavaScript. Of course, that page will only be editable by admins, but that might still be enough for your needs. (You could use the same trick to import JS from pages in other namespaces, but that would open a security hole miles wide.)
I am working on project that allows to read document within the browser without the need to install software , It's a part of a management application for companies.
I tried out to work with iTextSharp ,PDFSharp , but these labrories don't allows you to do what I want to do.It's just for generating pdf from HTML.
I checked out for another solution , I found an interesting project developed by Mozilla Lab . Mozilla is working on technology that will allow PDF documents to be rendered within the browser, rather than utilizing a browser plug-in or an external app to open them.
https://github.com/Marak/pdf.js/
I wonder to know Can I integer this script and use it with ASP.Net ? , If yes , I will be pleased to be guided by you with code source or external links that you recommend in order to implement this solution.
I believe that link you have sighted is about creating PDF file in browser (and not about showing existing PDF in browser).
Said that, there is another interesting project pdf.js that is trying to render PDF using java-script and HTML 5. Its essentially a java-script library that takes PDF bytes and attempt to render them. As such, you should able to integrate it in any web site regardless of server side technology - include the script and make relevant calls. See this simple example to get started.
I am a javascript newbie. I am trying to write a requirements document, and need some help describing what I am looking for. We want our application to generate a javascript snippet like this:
<script src="http://www.jotform.com/jsform/10511502633"></script>
This will load a web form.
So my question is:
- How does a single script load an entire web form? Is this a JSON?
- What is this called? Is this a cross browser javascript?
- Can anyone point me in the direction of learning more about what this is?
Thank you for your help!
The javascript file is just hosted on an external site. It appears to be dynamically generated, so feel free to use some fancy words ;) But basically, you just include it here, as if it was on your own site.
You could say "The application will generate the required script-tags to include dynamically generated javascript file from an external, third-party site".
Offcourse you need to take special cautions for cases when the include won't work, because the other site is not reachable (site is down, DNS does not work, file is moved on other webserver, your application is on an intranet/behind a proxy/firewall...). Why can't you copy their file and mirror it locally? Or use a reliable Content Delivery Network, like Google or Amazon.
There are many names for this type of inclusion. The most common being widget.
What does it actually do:
take an id of some sort as parameter
use the id to fetch some specific data (most likely from a database)
generate some js and html based on the id/data
usually this involves iframes of some sort.
To use a script rather than an html iframe has multiple advantages
you can change what is actually delivered to the users browsers without changing the include
you can resize the iframe to fit certain predefined sizes
you can inject the necessary things into the page the widget is included (of course you need to make sure this is sanctioned)
We use this all the time and we never regreted it.
If you don't want to build the widget infrastructure yourself you can always use one of the widget providers like widgetbox:
http://www.widgetbox.com/widgets/make/
With those you are up and running in no time.
This is typically called a script include.
Google have lots of these types of items, and even they call them by many names,
widgets, custom javascript, snippets, custom code, etc. It really depending on who you are writing for... I would go with "cross platform embeddable javascript code" meaning that it would need to load all its dependancies. Also specify which browsers need to be supported and what should happen is the user has javascript turned off.
EDIT :
Actually since we are talking unique IDs, you will need 2 parts probably, the user/site unique "cross platform embeddable javascript code" and whatever serverside code to support it. Basically this is an API that is accessed using your own javascript widget. Feel free you point to examples in your requirements document, programmers love examples.