Vue: продолжайте получать проблему предка iframe при попытке сделать чекбокс facebook messenger - PullRequest
0 голосов
/ 23 апреля 2019

Переключение с сайта PHP на сайт Vue.js, и у меня возникают проблемы с отображением флажка мессенджера Facebook. Я получаю сообщение об ошибке Refused to display. Violated iFrame ancestor в консоли.

Мой код выглядит следующим образом:

Modal.vue

<template>
  <div class="fb-messenger-checkbox"
    :origin=shopurl
    :page_id=fbPageId
    :messenger_app_id=fbAppId
    :user_ref=userRef
    prechecked="true"
    allow_login="true"
    size="medium">
  </div>
</template>

<script>

   export default {

      watch: {
         modalType(newVal) {
         if (newVal == "fbCheckbox") {
        let fbAppId      = this.fbAppId
        let fbApiVersion = this.fbApiVersion

        setTimeout(() => {
            window.fbAsyncInit = function() {
                FB.init({
                  appId      : fbAppId,
                  xfbml      : true,
                  version    : fbApiVersion
                });
                FB.Event.subscribe('messenger_checkbox', 
                             function(e) {
                  console.log("messenger_checkbox event");
                  console.log(e);
                  if (e.event == 'rendered') {
                    console.log("Plugin was rendered");
                  } else if (e.event == 'checkbox') {
                    var checkboxState = e.state;
                    console.log("Checkbox state: " + 
                            checkboxState);
                  } else if (e.event == 'not_you') {
                    console.log("User clicked 'not you'");
                  } else if (e.event == 'hidden') {
                    console.log("Plugin was hidden");
                  }
                });
              }; 
              window.fbAsyncInit()
        }, 500)
        }
          },

      }
   }

</script>

Я не уверен, в чем проблема сейчас, потому что это тот же код, который отображает флажок на странице PHP и все значения пропажи верны.

...