javascript firefox iframe dom-events undefined

`undefined` value of custom property in event (Firefox)

I have test.html page with code (https://gist.github.com/4293833):

<!doctype html>
<html>
<head>
  <script>
  var paymentEventHandler = function (e) {
    console.log(e)
    console.log('payment: ' + JSON.stringify(e.status))
    alert('status: ' + e.status)
  }

  if (document.addEventListener) {
    document.addEventListener('payment', paymentEventHandler)
  } else {
    document.attachEvent('onPayment', paymentEventHandler)
  }
  </script>
</head>
<body>
  <iframe src='/iframe.html'></iframe>
</body>
</html>

and iframe.html:

<!doctype html>
<html>
    <head>
        <script>
         var event

         if (document.createEvent) {
             event = document.createEvent("HTMLEvents")
             event.initEvent("payment", true, true)
         } else {
             event = document.createEventObject()
             event.eventType = 'payment'
         }

         event.status = 'ok'

         if (window.parent.document.dispatchEvent) {
             window.parent.document.dispatchEvent(event)
         } else {
              window.parent.document.fireEvent('onPayment', event)
         }
        </script>
    </head>
    <body>
    </body>
</html>

Code is works in Chrome, Safari, Opera, but in Firefox I got undefined. Why?

Solution

You need to create custom event and instead of htmlevent and initialize using initCustomEvent

html

    <!doctype html>
    <html>
    <head>
      <script>
      var paymentEventHandler = function (e) {
        alert('status: ' + e.detail.status)
      }
    
      if (document.addEventListener) {
        document.addEventListener('payment', paymentEventHandler)
      } else {
        document.attachEvent('onPayment', paymentEventHandler)
      }
      </script>
    </head>
    <body>
      <iframe src='iframe.html'></iframe>
    </body>
    </html>

iframe

    <!doctype html>
    <html>
        <head>
            <script>
             var event
    
             if (document.createEvent) {
                 event = document.createEvent("CustomEvent")
                 event.initCustomEvent("payment", true, true, {status:"ok"});
             } else {
                 event = document.createEventObject()
                 event.eventType = 'payment'
             }
    
             if (window.parent.document.dispatchEvent) {
                  console.dir(event);
                 window.parent.document.dispatchEvent(event)
             } else {
                  console.dir(event);
                  window.parent.document.fireEvent('onPayment', event)
             }
            </script>
        </head>
        <body>
        </body>
    </html>