How to access the data-directory in HTML - javascript

In the "Simple Addon"-tutorial of the Mozilla Addon-SDK, it reads:
/data - contains resources such as icons or HTML files, as well as
any content scripts included with your add-on. You can access the
content of the data subdirectory from within your add-on's code using
the Add-on SDK's self module.
In my Add-On, I use a HTML-page to display some contents in a panel. Since the contents are loaded by a Content-Script, i want to display a spinner.gif-file on the HTML-Page to show the user that the contents are being loaded. After the contents are fully loaded, I hide the spinner-image and display the contents (using jQuery).
My problem now is, that i don't have any clue how to embed the image in the HTML-page. The problem I'm facing is that I don't know the path to the image-file.
I know you use the self-module in an AddOn-Script to access the /data-directory, but on how to do this from a plain HTML-file or a Content-Script is not mentioned in the docs.
So this is what I have in my HTML-File (there is no need for the <head>-tag):
<html>
<h2>StackExchange Statistics</h2>
<div id="loading">
<img src="spinner.gif" alt="loading...">
<p>Fetching Data, please stand by</p>
</div>
<ul id="infos" style="display: none">
</ul>
</html>
Both this HTML-page and the image (spinner.gif) are located in the root of the /data-directory, but the above code only shows the alt-text. I also tried using /data/spinner.gif as the source, no luck.
So, how do I load an image from the /data-directory?

I tried reproducing your issue. I've created a trivial add-on and added a script file with the following code to the /lib directory:
const data = require("self").data;
var tabs = require("tabs");
tabs.open(data.url("test.html"));
Now the add-on will open a tab immediately after being installed. I created a file /data/test.html with the source code from your question and an image file /data/spinner.gif. And after the installation of the add-on a new tab opens and the image is there - beautiful. Note that the URL of the tab is resource://something-related-to-add-on-id-data/test.html and the URL of the image is resource://something-related-to-add-on-id-data/spinner.gif which is why the relative URL works. A URL like /data/spinner.gif wouldn't work, there is no data directory after the add-on has been compiled.
Now I guess that you are asking how you would find this URL from a content script? Fact is, the content script itself doesn't have the necessary API for that. But it can receive messages from your add-on. See "Communicating With Content Scripts" section in the documentation. Your content script needs to declare a function onMessage and the onAttach function in the add-on needs to actually send this message. Message payload can be this one URL or some more complicated data structure if you want to transfer more data.
As to regular web pages (not belonging to the add-on): all they can do is "guessing" the URL. You know what URL /data/spinner.gif is mapped to for your add-on. So you can simply use that URL in a web page. The catch: the URL might change in future SDK versions.

The data folder is available in main.js and you can pass that url as a content script option.
To preview the url in the console from main.js:
var data = require("sdk/self").data;
console.log(data.url('spinner.gif'));
To pass the url to the content script in main.js:
var image_url = data.url('spinner.gif');
contentScriptFile: data.url('myScript.js'),
contentScriptOptions: {"image_url" : image_url}
To view the url from the content script:
alert(self.options.image_url);
Let me know if that works for you.

Related

Unable to access the whole content of the downloaded html file

My original task is to download multiple scientific publications as html file. Currently my script downloads a file in chrome but it takes to the url in firefox. But that is not my questions.
If you will see the downloaded html source, you will find that not all content has got downloaded. Only some of the content shows up in the downloaded html file. That is my problem. Why I am not able to get the whole html document content in the downloaded html file. The file I want to download is this
var links = [
'http://www.sciencedirect.com/science/article/pii/S2078152015000516'
];
I thought probably it is because of CORS issue. But, after implementing CORS script, it was still showing the partially downloaded content in the responseText.
Any assistance will be appreciated.
Also, if someone can tell me why in firefox, the script does not downloads the file and takes me to the url instead.
The reason why you are unable to download the entire page, is because the page only loads half way, and the rest is added dynamically once you scroll down.
Therefore, when you try to download the page, you only receive the initially loaded half without the dynamic part.
since it is done using javascript, this particular website offers you an alternative in case you have javascript disabled and do not want to/cant enable it (like with a reader):
If you view the source of the page, you can locate the following message box at the very beginning of the body:
<div class="ua_btn" role="region" aria-label="screen reader compatability">
<a role="button" rel="nofollow" href="http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y">
Screen reader users, click here to load entire article
</a>
This page uses JavaScript to progressively load the article content as a user scrolls.
Screen reader users, click the load entire article button to bypass dynamically loaded article content.
</div>
here you are offered a link with a query part "np=y" which overrides the dynamic loading and initializes the whole page right away:
http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y
use this link in order to download the artice and it will work.
Firefox:
As mentioned in the comments, firefox does not support CORS downloads by design due to potential security risks. more about it can be found Here

'document.getElementById' only works on index.html

Ultimate goal is to cycle through photos on a blog page. Seems like 'document.getElementById().src' would be a good approach.
Problem: To make sure the javascript code is successfully linking to the blog page, I tried testing with this in my script.js file:
document.getElementById('testID').innerHTML = "Running test";
and this in my .html file:
<div id="testID"></div>
But, the text "Running Test" does not show up on the blog page. However, when running this same exact test in my index.html page, it does work. Both .html files load the same script file along with jQuery. I don't understand why it works in one html file and not the other.
NEW FINDING:
This line of code now works on the blog page when I remove it from inside
$(document).ready(function(){ ... });
Why would that be?
The Javascript in the current page can only access HTML elements that are in pages that are currently loaded into the browser.
More specifically, document.getElementById() ONLY searches the current web page's document for matching elements. It does not search any other pages and certainly does not search other files on your server that are not loaded into the browser. "current web page" means the HTML loaded from the current URL in the browser bar.
When a web page is no longer visible in the browser window (e.g it's been replaced by some other page), it is gone and no longer reachable by any Javascript. In some specific cases, you can access document loaded into other tabs or other frames (subject to same-origin security rules and requires a different method of access).
In addition, no changes to a web page are persistent in the browser. As soon as a web page is no longer loaded into an active browser window, it is gone and reloading it again will load the original, unmodified version of that document.
If you want the same code from one page to run in another page, then you must include that same code in the other page. You can want, you can share a reference to the code by putting the code into its own page and then using a <script src="xxx.js"> tag in each page to cause the same code to get loaded into each page.
If interpret Question correctly, try using .load()
$("#container").load("/blog/blog_1.html #testID")

Can't load url on same tab

I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.
You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.

how does jwplayer initialize when embedded in sitefinity?

We are using a Sitefinity portal and have the jwplayer on one of our pages. When I edit the page, all I see in the HTML code is a DIV with an ID for the video player. I do not see any reference to the javascript code. However, when I load the page, I see the setup() function and the script reference to the .js file.
I am trying to figure out where and at what point the setup() and reference to the .js code is loaded into the page.
We are experiencing a problem where the Sitefinity portal is loading over https and the media content (a remotely hosted .mp4 file) is loading over http. Because of the mixed https/http content this will not load on the page.
Any help is much appreciated!
Thanks!
Bob
Where did you put the js in the first place? You cannot edit tags in a Content Block.
As an alternative you can add a Javascript widget to the page ("Scripts and Styles" section). You won't have it double once you save the Content Block with the js stripped.

Load User Function before external resources in jsfiddle

I am working on developing a new accordion for my client. Everything is working correctly in my local machine but I am having issue when the same thing is uploaded in jsfiddle.
I found that the issue is because the user defined function is loading after the external js files I have added.
This is my fiddle. http://jsfiddle.net/imsabarinath/rpq2w/12/
In this I have added a user function detectBrowserClass.I have also added 8 external js files and css files via the external resource tab. But when I run the code, it seems that the user function is loaded only after all the external resources are loaded. I inspected with firebug and it clearly shows the user function is loaded after the external resources
Is there any way I can load the user function detectBrowserClass before loading any of the external resources in jsfiddle; means before all the script tags ?
Instead of using the "External Resources" option, you can put the script tags in the HTML field, i.e. add them to the body.

Categories

Resources