How do I replace an iframe source with only javascript?

Question

I have searched for solutions here, but nothing seems to work sadly...

I'm not a developer, but i'm trying to learn more about front-end development.

Currently I configure digital event platforms for events so my knowledge is only html and css for now. The platform I'm working with is an existing platform built by another company and they don't have any answer, except that I could try it with custom code.

The current situation: The platform has exhibition booths and each have a public chat which is just an iframe on a modal. --> There is 1 booth exhibitor that wants the chat to be invisible. So I thought there must be a way to hide that iframe or to change/replace the source with an about:blank.

The second option seems the best, because I want to target that particular chat. And I thought it must be possible to do it with Javascript.

The only thing I can access in the platform is a custom CSS field and a custom Javascript field.

This is the particular iframe, with a generic url (because it was a very long url)

<iframe style="width:100%;height:100%;border: 3px solid var(--colorMain);" src="https://chat.url"></iframe>

I hope someone can help me with this issue.

Roko C. Buljan · Accepted Answer · 2021-01-26 14:31:19Z

4

Target your element using attribute selector [] (since you don't have any ID for reference)
use IframeElement.src to change the SRC to a desired URI

const EL_iframeTarget = document.querySelector(`[src="https://chat.url"]`);
EL_iframeTarget.src = "https://example.com";

<iframe src="https://chat.url"></iframe>

answered Jan 26, 2021 at 14:31

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adriatic · Accepted Answer · 2021-01-26 14:30:09Z

1

You give your iFrame an ID like so:

<iframe id="iFrameID" style="width:100%;height:100%;border: 3px solid var(--colorMain);" src="https://chat.url"></iframe>

You get the element using JavaScript and update it's source value:

document.getElementById('iFrameID').src = "some_other_URL";

answered Jan 26, 2021 at 14:30

Adriatic

1,2971 gold badge10 silver badges31 bronze badges

2 Comments

Kevin Theys Over a year ago

Thanks for the quick answer! Well the problem is, I cannot edit the html to add an ID. I only have a custom Javascript field.

Adriatic Over a year ago

Ok, then see the answer of Roko C. Buljan. This will work for you.

Collectives™ on Stack Overflow

How do I replace an iframe source with only javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related