Ghost/ghost/admin/app/components/gh-site-iframe.js
Kevin Ansfield baafe011a2 Fixed portal preview resize and cached page bugs
no issue

- moved `@onLoad` trigger from `load` event to the `makeVisible()` task so that consumer code isn't called before load has fully finished
  - fixes issue with portal sometimes not being ready when we perform the resize on the membership screen
- added guid as a cache-busting `?v={guid}` query param
  - fixes issue where preview iframe can load stale data after a settings change resulting in a blank preview after going from "nobody" to "invite/anybody" because the loaded homepage is stale and doesn't have the portal script injected
2021-05-24 17:28:01 +01:00

88 lines
2.8 KiB
JavaScript

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
import {timeout} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class GhSiteIframeComponent extends Component {
@service config;
@tracked isInvisible = this.args.invisibleUntilLoaded;
willDestroy() {
if (this.messageListener) {
window.removeEventListener('message', this.messageListener);
}
this.args.onDestroyed?.();
}
get srcUrl() {
const srcUrl = new URL(this.args.src || `${this.config.get('blogUrl')}/`);
if (this.args.guid) {
srcUrl.searchParams.set('v', this.args.guid);
}
return srcUrl.href;
}
@action
resetSrcAttribute(iframe) {
// reset the src attribute and force reload each time the guid changes
// - allows for a click on the navigation item to reset back to the homepage
// or a portal preview modal to force a reload so it can fetch server-side data
if (this.args.guid !== this._lastGuid) {
if (iframe) {
if (this.args.invisibleUntilLoaded) {
this.isInvisible = true;
}
if (iframe.contentWindow.location.href !== this.srcUrl) {
iframe.contentWindow.location = this.srcUrl;
} else {
iframe.contentWindow.location.reload();
}
}
}
this._lastGuid = this.args.guid;
}
@action
onLoad(event) {
this.iframe = event.target;
if (this.args.invisibleUntilLoaded && typeof this.args.invisibleUntilLoaded === 'boolean') {
this.makeVisible.perform();
} else {
this.args.onLoad?.(this.iframe);
}
}
@action
attachMessageListener() {
if (typeof this.args.invisibleUntilLoaded === 'string') {
this.messageListener = (event) => {
const srcURL = new URL(this.srcUrl);
const originURL = new URL(event.origin);
if (originURL.origin === srcURL.origin) {
if (event.data === this.args.invisibleUntilLoaded) {
this.makeVisible.perform();
}
}
};
window.addEventListener('message', this.messageListener, true);
}
}
@task
*makeVisible() {
// give any scripts a bit of time to render before making visible
// allows portal to render it's overlay and prevent site background flashes
yield timeout(100);
this.isInvisible = false;
this.args.onLoad?.(this.iframe);
}
}