I want to write a simple firefox extension.
How can I get a reference to the loaded document object in a browser window? For example, how can I access the document in this html page loaded here on stackoverflow? According to the vague mozilla development center I can use browser.contentDocument, but it is not working for me.
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
function change(){
//var doc = document.getElementsByTagName("browser")[0].contentDocument;
//var doc = document.browser.contentDocument;
var doc = browser.contentDocument;
var body = doc.getElementsByTagName("body")[0];
var text = doc.createTextNode("blah");
body.appendChild(text);
}
</script>
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="click me" onclick="change();" />
</statusbar>
</overlay>
I'm not sure where you read that the variable is browser.contentDocument, since it's listed in several spots to be content.document (but I'm linking to the FAQ).
Variable for accessing content of current displayed document: window.content.document
Related
Can PDFreactor be used as a Web Service whereby javascript running on a browser can use the REST API to shuttle page content from the DOM to be converted to PDF? In this application, the content being rendered in the browser is generated exclusively by browser-side javascript (using the D3 library); the requirement here is to provide an "Export to PDF" type action to the browser end-user from the currently rendered page contents (via a button or menu action). The goal would then be to shuttle elements from the current DOM to PDFreactor via the REST API so that the Web Service could generate the PDF. Is this a reasonable use of PDFreactor?
Thank you in advance.
It is of course possible to convert the HTML content which was already processed by the browser with PDFreactor. In this case you could e.g. use the JavaScript API to pass the content extracted from the "body" element to PDFreactor and display the resulting PDF in the same page. Please see an example script below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://www.pdfreactor.com/product/wrappers/javascript/lib/PDFreactor.js"></script>
<script>
window.onload = function() {
convertToPDF();
}
function convertToPDF() {
// Create new PDFreactor instance
var pdfReactor = new PDFreactor();
// Get the content from the body element
var content = "<html><body>"+document.body.innerHTML+"</body></html>";
// Create a new PDFreactor configuration object
var config = {
// Specify the input document
'document': content,
// Set a base URL for images, style sheets, links
baseURL: window.location.href,
}
// Render document and save result
pdfReactor.convert(config, function(result) {
document.body.innerHTML += '<iframe id="result" style="width: 100%; height: 95vh"></iframe>';
document.getElementById("result").src = "data:application/pdf;base64," + result.document;
}, function(error) {
document.body.innerHTML += "<h1>An Error Has Occurred</h1>"
+ "<h2>" + error + "</h2>";
});
}
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
However as PDFreactor supports a variety of popular JavaScript libraries including D3.js, jQuery, etc. it might be more efficient to directly pass your input document including the JavaScript to the PDFreactor Web Service instead of converting the HTML rendered by the browser. PDFreactor will process any JavaScript within your input document, as long as JavaScript processing (disabled by default) is enabled in your PDFreactor integration.
I would like to add pinterest's nopin code to my site, inside the <head>.
I am using a custom theme and navigated to: app/design/frontend/default/THEME NAME/template/page/html/head.phtml
I also tried: app/design/frontend/base/default/template/page/html/head.phtml
I pasted the nopin code provided by Pinterest:
<meta name="pinterest" content="nopin" description="Sorry, we do not allow pinning of our copyrighted materials" />
No joy! Is there a location that I can post this or do I need to protect each image another way?
If you want to cover the entire site, the tag must be placed in
\app\design\frontend\default\theme_name\template\page\html\head.phtml
assuming Current Package Name is "default".
Flush the cache and reindex all the data
Tested on my dev site and is showing the message: "Sorry, we do not allow pinning of our copyrighted materials"
Also check your pinterest code. I use this one:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
Hope this helps
At my current project we got a website which is shown of a microcontroller at a monitor. I found XULRunner for displaying the page. It is nice, so I can hide all user panels very easy.
The microcontroller got a controller application too. The controller application gets the url which should be displayed from a server. With firefox I can execute "firefox theUrl" and it opens the browser with that url. If the browser is already running, the page opens at the running firefox.
To get that behavior at XULRunner, my main.xul looks like this:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="display" windowtype="display" title="Display"
onload="init();" hidechrome="true" zlevel="6">
<script type="application/javascript" src="cmdline.js" />
<script><![CDATA[
function init() {
var cmdLine = window.arguments[0].QueryInterface(Components.interfaces.nsICommandLine);
var content = document.getElementById("content");
content.setAttribute("src", cmdLine.getArgument(0));
content.contentWindow.focus();
window.resizeTo(screen.width, screen.height);
}
]]></script>
<hbox flex="1">
<browser id="content" flex="1" disablehistory="false"
src="chrome://commandlineinit/content/default.html" />
</hbox>
</window>
My prefs.js got that content:
pref("toolkit.defaultChromeURI", "chrome://applicationname/content/main.xul");
pref("toolkit.defaultChromeFeatures", "dialog=no, chrome, centerscreen");
pref("toolkit.singletonWindowType", display
And the chrome.manifest:
content applicationname content/
So, now I can open with xulrunner application.ini http://www.myPage.de the page. But when I call it a second, it do nothing.
So I added the commandline handler from that tutorial: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/XULRunner/CommandLine
At the method "observe" at chrome/content/cmdline.js I added
var cmdLine = window.arguments[0].QueryInterface(Components.interfaces.nsICommandLine);
var content = document.getElementById("content");
content.setAttribute("src", cmdLine.getArgument(0));
content.contentWindow.focus();
Now I have 2 problems. At that method, it can't find the element with ID content. So I can't change the url.
The other problem: It calls the observe method only at the first call. I think, the component components/clh.js isn't registert.
What did I wrong?
In previous versions(3.5) of CKEditor I was able to enter:
<br style="page-break-after: always;" />
However, after upgrading to 4.4.5, I noticed that the RTE no longer shows this HTML source, from the Database column, and so if one resaves the form with this RTE on it, then NULL is saved back to the database. It seems that CKEditor is stripping this HTML out for some reason.
How can I prevent this?
Many thanks.
EDIT 1
Discovered this to be added to config.js:
config.allowedContent = 'br {page-break-after}';
But does not work, although it should do....
EDIT 2
Link for above config setting
EDIT 3
I can try to enter the above HTML, in HTML Source View, but if I toggle the HTML Source button, and go back to Source View, it is now gone. So CKEditor is stripping this HTML out for some reason.
EDIT 4
Removed as now irrelevant
EDIT 5
Looking at the Browser source I see:
<textarea class="RuleRTE" cols="20" id="myCk" rows="2"><br style="page-break-after: always;" /> </textarea>
So clearly the data is there and being retrieved, but being converted which prevents me seeing it in the HTML Source view.
I have now found this is irrelevant as <p>test</p> test fine and it gets converted as well, I guess to prevent it being rendered like normal HTML in the page. So it seems the CKEditor does not like the tag ???
EDIT 6:
Removed as now irrelevant to question.
EDIT 7:
Debug JS:
<script type="text/javascript" language="javascript">
var editor = CKEDITOR.replace('Content', {
allowedContent: 'br[*]'
});
editor.on('instanceReady', function () {
console.log(editor.filter.allowedContent);
});
Results seem to show allowedContent is working fine, but BR element still invisible.
[Object, Object]
0: Object attributes: true
classes: null
elements: Object br: true
I suspect that there's a syntax or usage error with the way you're attempting to modify the allowedContent setting. Try doing something more simple along these lines: (do it in code rather than the config file)
var your_ck_editor = CKEDITOR.replace( 'your_ck_element_id', {
allowedContent: 'br[*]'
} );
The br[*] setting should allow any <br /> element with any attribute.
For troubleshooting purposes try this:
console.log( your_ck_editor.filter.allowedContent );
If this code does not work for you please post all the code that you use to set up your CKEditor as well as the output of your console.log call.
Followed http://damieng.com/blog/2010/04/26/creating-rss-feeds-in-asp-net-mvc to create RSS for my blog. Everything fine except html tags in xml document. Typical problem:
<br />
insted of
<br />
Normally I would use
#HtmlRaw()
or
MvcHtmlString()
But how can I fix it in XML document created with SyndicationFeed?
Edit:
Ok, I'm starting to think that my question is pointless.
Should I just leave my RSS as it is?
With the XML element, you can wrap the text with your HTML in it in as a CDATA section:
<![CDATA[
your html
]]>
I don't recommend doing that, however.
wrap the text in side the CDATA
var xml= '<person><name><![CDATA[<h1>john smith</h1>]]></name></person>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "name" );
$($title.text()).appendTo("body");
DEMO