I need to see the fully loaded and devloped dom of a page, i.e after my client loads up my page I want them to be able to click a button on fire fox and then fire fox will send me the fully developed dom so I can look through and see what happened there.
Can anyone help point me to the right direction?
First you need a function to know whether DOM is ready. A functionality provided by many Javascript frameworks, but refer this if you need a pure js implementation.
When the DOM is ready the button is enabled for the user to click.
Then you may have a function to serialize the DOM tree to a string. As Load and Save DOM is not yet implemented in Mozilla, read this MDN article to get to know what you want.
Now you can send the Saved DOM to your Web Service.
//Code grabbed mostly from MDN article linked
var req = new XMLHttpRequest();
req.open("GET", "chrome://passwdmaker/content/people.xml", false);
req.send(null);
var dom = req.responseXML;
var serializer = new XMLSerializer();
var foStream = Components.classes["#mozilla.org/network/file-output-stream;1"]
.createInstance(Components.interfaces.nsIFileOutputStream);
var file = Components.classes["#mozilla.org/file/directory_service;1"]
.getService(Components.interfaces.nsIProperties)
.get("ProfD", Components.interfaces.nsILocalFile);//get profile folder
file.append("extensions"); // extensions sub-directory
file.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}");//GUID of your extension
file.append("myXMLFile.xml"); // filename
foStream.init(file, 0x02 | 0x08 | 0x20, 0664, 0);//write, create, truncate
serializer.serializeToStream(dom, foStream, "");//remember, dom is the DOM tree
foStream.close();
Hope this would help!
Related
We are working on tracking a site which has components built using Shadow DOM concepts, when we are creating a rule in launch to add tagging to these components it’s not working.
Can you guide us with best practice on tagging components in Shadow DOM?
I found unanswered questions about google analytics Google analytics inside shadow DOM doesn't work is this true for adobe analytics also?
Best Practice
Firstly, the spirit of using Shadow DOM concepts is to provide scope/closure for web components, so that people can't just go poking at them and messing them up. In principle, it is similar to having a local scoped variable inside a function that a higher scope can't touch. In practice, it is possible to get around this "wall" and have your way with it, but it breaks the "spirit" of shadow DOM, which IMO is bad practice.
So, if I were to advise some best practice about any of this, my first advice is to as much as possible, respect the spirit of web components that utilize shadow DOM, and treat them like the black box they strive to be. Meaning, you should go to the web developers in charge of the web component and ask them to provide an interface for you to use.
For example, Adobe Launch has the ability to listen for custom events broadcast to the (light) DOM, so the site developers can add to their web component, create a custom event and broadcast it on click of the button.
Note: Launch's custom event listener will only listen for custom event broadcasts starting at document.body, not document, so make sure to create and broadcast custom events on document.body or deeper.
"But the devs won't do anything so I have to take matters into my own hands..."
Sadly, this is a reality more often than not, so you gotta do what you gotta do. If this is the case, well, Launch does not currently have any native features to really make life easier for you in this regard (for the "core" part of the below stuff, anyways), and as of this post, AFAIK there are no public extensions that offer anything for this, either. But that doesn't mean you're SoL.
But I want to state that I'm not sure I would be quick to call the rest of this answer "Best Practice" so much as "It's 'a' solution..". Mostly because this largely involves just dumping a lot of pure javascript into a custom code box and calling it a day, which is more of a "catch-all, last resort" solution.
Meanwhile, in general, it's best practice to avoid using custom code boxes when it comes to tag managers unless you have to. The whole point of tag managers is to abstract away the code.
I think the TL;DR here is basically me reiterating this something that should ideally be put on the site devs' plate to do. But if you still really need to do it all in Launch because ReasonsTM, keep on reading.
'A' Solution...
Note: This is a really basic example with a simple open-mode shadow DOM scenario - in reality your scenario is almost certainly a lot more complex. I expect you to know what you're doing with javascript if you're diving into this!
Let's say you have the following on the page. Simple example of a custom html element with a button added to its shadow DOM.
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({
mode: 'open'
});
var button = document.createElement('button');
button.id = 'myButton';
button.value = 'my button value';
button.innerText = 'My Button';
this._shadowRoot.appendChild(button);
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component id='myComponentContainer'></my-component>
Let's say you want to trigger a rule when a visitor clicks on the button.
Quick Solution Example
At this point I should probably say that you can get away with doing a Launch click event rule with query selector my-component#myComponentContainer with a custom code condition along the lines of:
return event.nativeEvent.path[0].matches('button#myButton');
Something like this should work for this scenario because there are a lot of stars aligned here:
The shadow dom is open mode, so no hacks to overwrite things
There are easily identifiable unique css selectors for both light and shadow DOM levels
You just want to listen for the click event, which bubbles up and
acts like a click happened on the shadow root's light DOM root.
In practice though, your requirements probably aren't going to be this easy. Maybe you need to attach some other event listener, such as a video play event. Unfortunately, there is no "one size fits all" solution at this point; it just depends on what your actual tracking requirements are.
But in general, the goal is pretty much the same as what you would have asked the devs to do: create and broadcast a custom (light) DOM event within the context of the shadow DOM.
Better Solution Example
Using the same component example and requirement as above, you could for example create a rule to trigger on DOM Ready. Name it something like "My Component Tracking - Core" or whatever. No conditions, unless you want to do something like check if the web component's root light DOM element exists or whatever.
Overall, this is the core code for attaching the event listener to the button and dispatching a custom event for Launch to listen for. Note, this code is based on our example component and tracking requirements above. It is unique to this example. You will need to write similar code based on your own setup.
Add a custom js container with something along the lines of this:
// get the root (light dom) element of the component
var rootElement = document.querySelector('#myComponentContainer');
if (rootElement && rootElement.shadowRoot) {
// get a reference to the component's shadow dom
var rootElementDOM = rootElement.shadowRoot;
// try and look for the button
var elem = rootElementDOM.querySelector('button#myButton');
if (elem) {
// add a click event listener to the button
elem.addEventListener('click', function(e) {
// optional payload of data to send to the custom event, e.g. the button's value
var data = {
value: e.target.value
};
// create a custom event 'MyButtonClick' to broadcast
var ev = new CustomEvent('MyButtonClick', {
detail: data
});
// broadcast the event (remember, natively, Launch can only listen for custom events starting on document.body, not document!
document.body.dispatchEvent(ev);
}, false);
}
}
From here, you can create a new rule that listens for the custom event broadcast.
Custom Event Rule Example
Rule name: My Button clicks
Events
Extension: Core
Event Type: Custom Event
Name: MyButtonClick
Custom Event Type: MyButtonClick
Elements matching the CSS selector: body
Conditions
*None for this scenario*
From here, you can set whatever Actions you want (set Adobe Analytics variables, send beacon, etc.).
Note:
In this example, I sent a data payload to the custom event. You can reference the payload in any custom (javascript) code box with event.detail, e.g. event.detail.value. You can also reference them in Launch fields with the % syntax, e.g. %event.detail.value%.
Let me start off by saying that the code in question is part of a UserScript and, as such, normal DOM rules and Javascript methods do not work.
Here is the situation:
I have written a UserScript that interacts with an online chat site. I have a number of button that are generated within the user script. Some of these buttons are located inside of a form, while many of them are not.
Elements added through GreaseMonkey live in two worlds -- they live on the page DOM and they live in the slightly elevated world of UserScripts, which mean that these lines:
event.preventDefault = true;
event.stopPropagation = true;
prevent the rest of the UserScript actions from running, but it does not stop the button from causing a form submit.
As a work around, I am building span elements instead of a button. This works, but it really breaks the visual layout of the chat room.
Does anyone know a way to prevent elements added by UserScripts to prevent form submissions? Failing that, I'll dream that someone knows how to make a span look like a native button.
Edit: I have a solution which seems to be working -- but I haven't fully tested it under every UserScript environment:
// Yes, yes, poorly named but it was a SPAN
// userWindow is an alias for unsafeWindow.
// (Used to run under a userScript environment for IE and I had to emulate a lot)
var span = document.createElement("input");
span.value = text;
span.type = "button";
span.className = "cpbutton";
// Add it to the body just long enough to set up a page-level, DOM0 event handler
var body = userWindow.document.getElementsByTagName("body")[0];
var tname = "IAmTheVeryModelOfAModernMajorGeneral";
span.id = tname;
body.appendChild(span);
userWindow.document.getElementById(tname).onclick = function() {return false;};
body.removeChild(span);
span.id = "";
See the W3C spec for <button>.
By default, a <button> element acts as a submit button inside a form. This means that event.preventDefault() (the correct usage, BTW), on the click handler, may not be enough to stop the form submit.
In that case you could intercept the form's submit event too BUT, the smart thing to do is to use the type attribute to tell the browser not to treat the button as a submit button.
EG:
<button type="button">Your button markup</button>
when you say
to prevent elements added by UserScripts to prevent form submissions
i'm not sure if you want to allow or prevent submiting the form...
anyway, here is a link and a div disguised as a button: http://jsfiddle.net/RASG/PvhUb/
and if you post some of your code, i can help you with your script.
I'm developing a photo gallery that uses ajax. I'm using _escaped_fragment_ (#!) too, it already works but when you use the back and fwd browser buttons the url change (the hash fragment) but the image doesn't. I read about the onHashChange event but i wanto to know if there's an automatic way to do this, i mean, if there's a way to preserve the DOM changes in the history just like Facebook does.
I change the hash fragment with:
window.location.hash = "!"+sth
I load ajax content retrieving the hash fragment and using it as index of my photo:
var fragment = window.location.hash.replace("#!","");
if (fragment != ""){
currentItem = fragment;
currentItemBZ = fragment-1;
focused = currentItemBZ;
}
Any help or suggestion will be appreciated
I've used this jQuery plugin in the past to retain back-button and history functionality in an ajax-based application:
http://www.asual.com/jquery/address/
You can register an on change listener, and then change the image in your gallery depending on the new value of the hash.
Before you start shooting me down i have checked for answers and i have googled till my fingers bled but i havent been able to find a simple, concise answer. So im asking again for all those that might have this problem.
Question: how to open a new window with a formpanel in side.
Context: i have an app that lists lots of items, i want someone to edit an entry, i want a new window to open so they can edit properties then hit save. A standard thing you find in a lot of applications.
Architecture:
I have one client module called UI, it has a dozen classes that draw widgets and fill a main area when selected from a menu. I have a single html page called UI.html which has the tag in the head. Thats it.
Options Ive Seen
Call Window.Open() but you need to define a html file. I dont have one. I can create an empty one but how do you inject a widget in to it ?
use jsni $wnd to create a new window and get a reference to it. But how do i inject a form panel into it ??
use a popuppanel. They look sucky - plus if opening a window through JS is quite simple i would expect it to be in gwt.
Maybe im miss understanding how to use GWT i dont know.
Any help would be appreciated
Thanks
The way i got this to work is as follows:
i wrote a jsni method to open a new window
public static native BodyElement getBodyElement() /*-{
var win = window.open("", "win", "width=940,height=400,status=1,resizeable=1,scrollbars=1"); // a window object
win.document.open("text/html", "replace");
i added a basic body to the new window and returned the body element
win.document.write("<HTML><HEAD>"+css1+css2+"</HEAD><BODY><div class=\"mainpanel\"><div style=\"width: 100%; height: 54px;\"><div id=\"mainbody\"class=\"mainbody\" style=\"width: 100%;\"></div></div></div></BODY></HTML>");
win.document.close();
win.focus();
return win.document.body;
}-*/;
i then called this method from my main java method
BodyElement bdElement = getBodyElement();
I then injected my panel which has lots of widgets into the returned body element
SystemConfiguration config = new SystemConfiguration(); bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
I agree with Bogdan: Use a DialogBox.
If you can't, you Window.open() as you mentioned in option 1:
Create another GWT module, and form.html that will load it
Window.open("form.html?entry=54")
Have the form gwt module read from the URL, load the entry, allow it to be edited, and provide Save and Cancel buttons
Close the popup when Save or Cancel is clicked
Can't you just use a DialogBox?
Example
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};