Переключение с сайта 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 и все значения пропажи верны.