ampproject / ampproject/amphtml
amp-script does not support creating amp-iframe
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
Hi team,
I need to display an Iframe tag on my website via script. I tried 2 ways but still no success:.
Method 1: Create an iframe tag and hide it, click the button and make it visible.
Method 2: Click the button and then create an iframe tag and display it.
I think, amp-script didn't support creating amp-iframe.
Do we have any solution for this problem?.
Here is my example code.
Thank you so much
Method 1:
`
Show
Hide
const showPrice = document.getElementById('show-price');
const hidePrice = document.getElementById('hide-price');
const chart = document.getElementById('price');
showPrice.addEventListener('click', () => {
hidePrice.classList.remove('d-none');
chart.classList.remove('d-none');
showPrice.setAttribute('class','d-none');
});
hidePrice.addEventListener('click', () => {
hidePrice.setAttribute('class','d-none');
chart.setAttribute('class','d-none');
showPrice.classList.remove('d-none');
});
`
Method 2
`
Show
Hide
const showPrice = document.getElementById('show-price');
const hidePrice = document.getElementById('hide-price');
showPrice.addEventListener('click', () => {
hidePrice.classList.remove('d-none');
showPrice.setAttribute('class','d-none');
const iframePrice = document.createElement('amp-iframe');
iframePrice.setAttribute('width','400');
iframePrice.setAttribute('height','225');
iframePrice.setAttribute('sandbox','allow-scripts allow-same-origin');
iframePrice.setAttribute('layout','responsive');
iframePrice.setAttribute('src','https://giphy.com/embed/OWabwoEn7ezug');
document.body.appendChild(iframePrice);
});
`
### Reproduction Steps
You can see my example at
https://sosanhgiakhoahoc.com/test1
### Relevant Logs
_No response_
### Browser(s) Affected
Chrome, Firefox, Safari, Edge, UC Browser
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start by reproducing both amp-script approaches from the issue at https://sosanhgiakhoahoc.com/test1 and compare their behavior in the listed browsers. Trace the amp-script and amp-iframe behavior needed to determine whether dynamically creating or revealing the element is supported; done means establishing a documented solution or a clear limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100