ampproject / ampproject/amphtml

amp-script does not support creating amp-iframe

Open
#35,567 2 comments 0 reactions 0 assignees View on GitHub
Stale Type: Bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.