1

The design for the project I'm working on has live chat plugin and an image on the header that says online/offline. I'm trying to work on script that will place the "online" image when the agent is online.

The heading of the plugin displays the status, like so

<span __jx__id="___1_livehelpbutton__agentstatus" class="agentStatus" style>Offline</span>

I would like to get the innerHTML of the tag and use it in the conditional of an if statement, which, if the status is "online" will display the "online" image and otherwise display the offline image. That is where I run into an issue. I'm having trouble selecting for this tag. When I try this on the console, I get [] and no change on the screen. 

$('.agentStatus').css('background','red');

When, as a test on the CSS page, I try .agentStatus { background: red; }, the background turns red.

The iframe it is in is does not have a different url:

<iframe __jx__id="___$13__iframe src="javascript:void(document.write('<!DOCTYPE HTML PUBLIC -//W3C//DTD HTM…order-box}</style></head><body></body></html>'), document.close())" frameborder="0" style=" background-color: transparent; vertical-align: text-bottom; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; z-index: 999999;">
    #document
        <!DOCTYPE html PUBLIC"-W3C//DTD HTML 4.0 Transitional/EN" "http:www.w3.org/TR/html4/loose.dtd"
            <html style="overflow-y: hidden">
                 ...
j08691
  • 204,283
  • 31
  • 260
  • 272
Jack Pilowsky
  • 2,275
  • 5
  • 28
  • 38
  • Shouldn't this be as simple as `$("#status").removeClass("offline").addClass("online");`? – Halcyon Jul 02 '13 at 16:56
  • Yes, the code inside the if statement would be fairly simple. The problem I'm having is with the selector for the conditional part of of the if statement. – Jack Pilowsky Jul 02 '13 at 17:07

1 Answers1

3

The problem is that you simply cannot access the content in an iframe without first grabbing the document that is being displayed by the iframe.

This post explains this better than I can.

There is no actual way to do this in JavaScript or jQuery, unless the iframe's source is on the same domain (research 'Cross-Domain and JavaScript'). If they are on the same domain, however, you should be able to select (and manipulate) elements using the following:

$("#iframeID").contents().find(".agentStatus").css("background", "red");

This post shows a few alternative solutions to this, as well.

Community
  • 1
  • 1
Zachary Kniebel
  • 4,686
  • 3
  • 29
  • 53