使用者同意聲明模式 UI
簡介
有時發布商希望在初始同意聲明提示 iframe 中顯示更多揭露事項。此範例示範如何將 amp-consent 與第三方 iframe 一起使用，並設定樣式使其看起來像模式。
設定
我們需要匯入 amp-consent 元件。
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
定義同意流程
我們使用 promptUISrc 定義基本同意流程，以載入我們的自訂同意聲明 iframe。
<amp-consent id="myUserConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "myConsent",
"consentRequired": true,
"promptUISrc": "/static/samples/files/diy-consent.html",
"postPromptUI": "post-consent-ui"
}</script>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()">Update Consent</button>
</div>
</amp-consent>
同意聲明對話框 Iframe
當同意聲明對話框 iframe 準備就緒時，它可以將樣式資訊透過 postMessage 傳送給 amp-consent 元件。
window.parent.postMessage({ type: 'consent-ui', action: 'ready', initialHeight: '80vh', enableBorder: true }, '*');
在此，initialHeight 是一個字串，代表 iframe 應佔用的viewport 高度。介於 30 到 60 (含) 之間的 viewport 高度會告知 amp-consent 將 iframe 設定為底部工作表樣式。大於 60 且小於或等於 80 的 viewport 高度會告知 amp-consent 將 iframe 設定為置中模式樣式。
使用 data-block-on-consent 屬性來封鎖 AMP 元件，直到使用者給予同意。個別 AMP 元件可以覆寫封鎖行為並自行實作封鎖邏輯。
這是一個影像，在使用者給予同意之前會遭到封鎖
<amp-img data-block-on-consent src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201">
</amp-img>
需要更多說明嗎？
如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色？AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題提供一次性的貢獻。
在 GitHub 上編輯範例-