Community Toolbar

Conduit API

Case Study

HTML Apps -> JSInjection

This function is used to inject JavaScript into the web page currently displayed in the browser in the active tab (app-to-webpage only). It enables the publisher to add logic and modify the structure of a currently-visited web page. Note that changes to the page take place on the client side and are not permanent.

- Syntax

JSInjection(strScript)

- Parameters

Parameter	Description	Range	Type
strScript	JavaScript commands to be executed on the web page currently loaded in the browser's active tab.	Any JavaScript code	string

- Return Value

Boolean (Succeeded or not)
Function "EBCallBackMessageReceived(data)" is called after the injection is completed. (Optional) The parameter can be used to pass a value to the function during execution of the injected code.

- Remarks

The injected JavaScript code can include one or more lines and can also include the callback function "EBCallBackMessageRecieved(data)" that will be executed after the injection is completed.
Calling other user-defined functions from within the injected code is possible only if they are also implemented inside the injected code.
This function requires special permissions. You will need to apply the following security settings to your app.
This function can be used both with the HTML app and with the gadget window.

*Notice: API methods must be invoked after the web page has triggered the "onload" event.

- Code Example

This example contains four buttons with different colors. Clicking on one of the buttons will change the background color of the current web page to the specified color. When color change is done, a ‘success’ message will be displayed (using the callback function).

<head>
<style type= "text/css">
BODY {
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:0;
width:100%;
height:100%;
overflow:hidden;
background-color:threedface; }
</style>
<!-- Conduit API script declaration -->
<script type="text/javascript" language="javascript" src="http://www.conduit.com/Api/BrowserCompApi.js"></script>
<script type="text/javascript">
function changeBG(whichColor, ColorName) {
var strScript = 'document.body.style.background = "' + whichColor + '";\nEBCallBackMessageReceived("' + ColorName + '"); ';
JSInjection(strScript);
}

function EBCallBackMessageReceived(strMsg) {
document.getElementById("ButtonPressed").innerHTML = "<p>>> Background color was changed to " + strMsg + "!</p>";
}
</script>
<title>JavaScript Injection</title>
</head>
<body>
<label id="Order" style="position:relative;left:3px;font-family:Verdana;font-size:13px;">Change Background Color:</label>
<button style="background-color:Black;color:White;" onclick="changeBG('#000000','Black');">Black</button>
<button style="background-color:threedface;" onclick="changeBG('#D4D0C8','Gray');">Gray</button>
<button style="background-color:Red;" onclick="changeBG('#FF0000','Red');">Red</button>
<button style="background-color:White;" onclick="changeBG('#FFFFFF','White');">White</button>
<br /><div id="ButtonPressed" style="position:relative;left:3px;font-family:Verdana;font-size:13px;"></div>
</body>

- Code Usage