Tokbox session methods inaccessible - javascript

I am getting a javascript object which contains method list but I am not able to access method.
I am integrating tokbox api and i want to call unpublish function when user wants to disconnect the stream.
Please find attached image of my object and whole function list. Please give me solutions as soon as possible.

I don't see the problem from the screenshot attached. The session.unpublish(publisher) method should work as expected. If it is not, can you please show what the errors or the bad behavior look like? Are you passing in the Publisher object? Also be aware that just because you unpublish, does not mean the video element on the page will disappear, for that you must call publisher.destroy(). Lastly, the most simple solution would just be to call session.disconnect() and that will automatically clean up by unpublishing and destroying the publisher.
I do see another error related to a parameter you passed to either OT.initPublisher(element, properties, completionHandler), session.publish(element, properties, completionHandler), or session.subscribe(stream, element, properties, completionHandler). In one of those, as the element parameter, you are passing a reference to window rather than a valid element from the page. You might also have intended to use a String that matches the id attribute of an element on the page. Please fix that.

Related

Is it possible to get a DOM element in GTM custom template?

Description
So I've read through the GTM Custom template APIs; but I don't find anything regarding getting (e.g.) a div element. I've tried copying document from window using copyFromWindow() or calling document.getElementById through callInWindow(), but both times, I always get this error message when I add document to the permissions:
The value must not start with any key predefined on global scope (i.e. in Window), or any JavaScript keywords.
Question
Is there anyway that it is possible to call a DOM element through custom GTM tags?
My goal is to create a tag that can inject video's in selected div elements. I could do this by creating a custom HTML tag, but I don't want our marketing guy to always go through code. So a tag that asks him for the target ID and video url could make it easier
No. Preventing access to the DOM (and controlling access to the global namespace) is pretty much the point of sandboxed Javascript. Since GTM is not supposed to interfere with the DOM, this should not usually be a problem (well, that's what Google thinks at least).
If you need to learn about some property of a DOM object, you can get this (i.e. the property, not the object itself) via a DOM type variable and pass it in as a data item by creating a field that accept variables.
Simo has a bit about this in his inital write-up on custom templates (you have to scroll down quite a bit). While Google has added a number of APIs since, I doubt that a DOM API is coming up, because that would pretty much defy the purpose of sandboxed Javascript.

Accessing DOM objects with few identifiers (chrome extension)

I'm attempting to make my first ever chrome extension and I want to access the "Compose" button on Gmail via my content.js. I located the div that I want to use by inspecting the page, but I'm not sure how I can access it with Javascript since it's really deeply nested and doesn't have an ID attribute. I tried using document.querySelectorAll(".T-I.J-J5-Ji.T-I-KE.L3") and document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3"), but the returned array was always empty. What am I doing wrong/what is a better way to access this element?
This is the HTML for the element I'm trying to get
here.
It would probably be easier to see the code I'm talking about by logging into Gmail (if you have one and right-clicking the "Compose" button and clicking Inspect).
I tried to type the command document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3") in the console and it returned an array that contains theelement you are searching for.
I would say that your script do not have access to the entire document, so that you can not modify whatever you want, but I don't know enought about Chrome extension to be sure of that.
Good luck !
Try matching for document.querySelector('[gh="cm"]');.
I'm not sure what the gh attribute stands for, but its value cm represents the ComposeMessage button.

Imitating a click on a dynamically added element with vanilla JavaScript

I have a ReactJS-based website which I wanna navigate programmatically. Basically, the workflow is looped:
Click on Element1.
The web page code is dynamically altered, during which Element2 is added.
Click on Element2.
Etc, until, after clicking on ElementN, the web page returns to the initial state and Element1 is displayed again. Clicking on those elements is what I wanna automate from within the website itself.
I have an access to the JS file that is responsible for the website contents creation and alteration. I can locate the code which describes the elements I'm interested in, and add any extra event listeners if need be.
I'm almost completely new to the client-side development, so my approach to solving this task is purely intuitive. So far my idea was to add an event listener for some sort of "onAdded" event which would fire when the element is added to DOM, and from that listener call the "onclick" listener (or dispatch the "click" event in some other way). However, i can't find any events that would indicate an addition to the DOM tree.
So, strictly speaking, i have two questions:
Is the approach described above viable (and adequate)? If so, then how exactly do i accomplish it?
If i'm doing it all wrong then what would be the right way to accomplish my task?
Edit 1
As per Matthew Herbst's suggestion, I looked into React lifecycle methods like componentDidMount. Turns out, the elements I wanna automate clicking on are not independent React component but some other component's contents added inside the render method with a huge chain of createElement calls.
So now the problem switches from detecting a moment when a particular element is added to the DOM structure to finding a way to interact with it.
The easy (and ugly) way to do it, as I currently see it, is to use the window object from componentDidMount, locate the element I wanna click by its data-reactid attribute (which is a string of dot-separated digits which, from what I can tell, is generated dynamically and reflects the element hierarchy) and then dispatch the required DOM event.
It might work, but if the document structure changes then the values of the data-reactid then it's all broken again. I would prefer to somehow dispatch the React's own onClick event properly, but I don't know how. I tried calling the function that gets passed to the createElement method as a value of the onClick property from componentDidMount, but for some reason it doesn't work.
I have also tried the method of interacting with DOM described in this article, but in my case the ReactDOM object doesn't seem to be defined.
Since I'm not much of a client-side developer, especially not a React guru, I don't really see the whole picture of how the website's client logic is working, and the code I'm working with seems to be minified/obfuscated to make it even harder. So if anyone could provide any specific suggestions without sending me to read all the React documentation, I'd be grateful.
Okay, I'm not sure if a question as profane as mine should be answered at all, but it looks like I got it figured out.
The minified/obfuscated code I had to deal with still had prominent features of a React application, such as objects with series of callbacks like render, componentDidMount or componentDidUpdate. So, just like Matthew Herbst suggested, I looked into the things they do.
The elements clicking on which I needed to automate were created inside the render methods by long chains of createElement calls which looked something like this:
T["default"].createElement("li", null, T["default"].createElement("div", {
className: P["default"].img
}, T["default"].createElement("img", {
src: n(600),
alt: ""
}), T["default"].createElement("b", null , "+3")), T["default"].createElement("h4", null , "«Header text»", T["default"].createElement("b", null , "+3")), T["default"].createElement("p", null , "Description"), T["default"].createElement("div", {
className: P["default"].btn
}, T["default"].createElement(A.Btn, {
mod: "info",
onClick: this._router.bind(this, "/gtr", "gtr")
}, "Play")))
I should have posted that code in the original post, but back then I didn't really understand what's going on here.
It turns out, the object referred to by T["default"] is a React object, meaning that T["default"].createElement calls were actually equivalent to the React.createElement ones.
Then, the article by James K. Nelson helped, which explained that in order to locate a specific child of a component I need to assign a ref attribute to it. I needed to access that "Play" button, so I tried adding a ref property to what looked like its descriptor object, so it would look like
T["default"].createElement(A.Btn, {
mod: "info",
ref: "automatedElement1",
onClick: this._router.bind(this, "/gtr", "gtr")
}, "Play")
, and it worked. Now, inside the componentDidUpdate method I could use the code like
if (this.refs.hasOwnProperty("automatedElement1")) {
var buttonElement = this.refs.automatedElement1;
}
Unfortunately, I didn't quite understand how to get from this object to its DOM reflection, but by simply studying its contents I managed to find a property which corresponds to the value of the data-reactid attribute of an HTML element of that button. So then I found no smarter solution than to acquire the element's DOM node by using the document.querySelector method:
var buttonNode = document.querySelector('button[data-reactid="' + buttonElement._reactInternalInstance._rootNodeID + '"]');
if (buttonNode) {
buttonNode.click();
}
This might be a bad solution, but that's the solution I managed to find in my situation, and it works. Hope it helps anyone who had a rough encounter with a React application and didn't know where to start.

jquery - how do i access those arrays and variables in the dom?

Im using firebug to debug jquery and in the dom tab i can see all the vars and arrays in there.
How do I access the different arrays and vars in the dom?
Cheers
Ke
I cannot access these object items, even though firefox lists them, i have sitems in the top level of the dom, i also have sitems within the parent variable.
a lot of head scratching happening here, would be grateful for any help :)
Looks like you want to access a user defined property, since these are not properties of the DOM ( Firebug Wiki DOM panel page. ), I don't think you can access them directly through your page, but you can access them through the Firebug console.
Simply type the name of the property into the command line of the Console... the part after >>> on the very bottom.
In your case you would type something like: sitems[0] and hit enter.
To access properties of the DOM... take a look at the DOM exploration page for Firebug.
To see how to access properties, functions, or constants of the DOM, check what you're interested in in the DOM tab.
Then you can "follow the bread crumbs" to access properties directly. Global properties are attached to window, so you don't need to include window:
Make sure to right click on things and explore the context menu, especially if you start looking at functions.
If it's an array you should access it as an array by referencing the index in the Array you are trying to access.
alert(sitems[1]);
If it's an object you can reference by using the "key" for the property or method of the object you are trying to access:
alert(sitems["keyName"]);
Likewise some of the stuff you'll see in the DOM tab are actually references to methods and objects within the DOM, so if you're going to call them or reference them you need to do so based on their type, or you may even need to provide arguments to them in order to get a response.
It's giving 'undefined' because you can't output the contents of an Array just by calling its name.

IE throws an "Object required" error when trying to use the Event Object from another window/frame

I found a JavaScript error in a script that I'm developing. I whittled it down to a pair of fairly concise pages that still produce the error:
http://troy.onespot.com/static/4505/index.html
http://troy.onespot.com/static/4505/iframe.html
If you load the first page in Internet Explorer 8 (or probably 6 or 7, for that matter), give it about half a second to run the script, then click the "Google" link inside of the <iframe>, you should see an error message appear:
http://skitch.com/troywarr/dui21/ie8-error
(You may need to uncheck Tools > Internet Options > Advanced > "Disable script debugging (Internet Explorer)" and check "Display a notification about every script error" two lines below to see the error messages.)
Starting the debugger shows the beautifully insightful message "Object required":
http://skitch.com/troywarr/dui26/ie8-debugging
The culprit is the line:
target = event_object.target || event_object.srcElement;
I think that's valid code - at least it works in Firefox. My best guess is that there is an issue with trying to access the Event Object of one frame from another - vaguely similar to why you can't rely on instanceof to detect arrays if they were created in a different window/frame (search for "context" at http://javascript.crockford.com/remedial.html if that didn't make sense).
Does that sound like a valid theory? If so, what can I do to fix this? If at all possible, I need to preserve the same general code structure/functionality:
There is a link inside an <iframe> on a page.
A script in the <iframe> calls a function on the parent page, which attaches an event handler to the element in the <iframe> with the specified id attribute.
Clicking that <iframe>d link triggers the event, which calls a function on the parent page, passing the Event Object by default.
The function on the parent page determines information about the clicked element (the <a>) from the Event Object in a cross-browser-compatible way.
I would also like to continue using event delegation, and keep all of the functions in the parent document, just calling them with arguments from the <iframe>d document. However, if you have any suggestions for alternative approaches, I'd love to hear them.
Thanks in advance for any help! Please let me know if you need any more explanation about my requirements or what I'm trying to do - I'm hoping that there's just a better way to access or pass the Event Object that I'm not aware of - an "Oh, yeah, you just need to do it like this" kind of solution. I hope that's not wishful thinking. ;-)
Easily fixed. You need the event object from the iframe's window. Store the iframe's window object next to where you store its document:
var iframe_win = document.getElementsByTagName('iframe')[0].contentWindow;
... and update the line that gets hold of the event object in your event handler function:
event_object = event_object || iframe_win.event;

Categories

Resources