Use IFrame in LWC Salesforce

by Rijwan Mohmmed
use-iframe-in-lwc-salesforce

Hello friends, today we will discuss Use IFrame in LWC component in Salesforce. We use an iframe to load other website pages. Like if you want to show third-party page eg. google.com then you just need to put this URL link in iframe src. We can give height and width in the iframe. We also use event listeners like onload for the call LWC js method.

Also check this: Test Data Factory in Apex Salesforce

Key Highlights :

  1. We use the iframe to display visualforce page where we can send parameters in URL and the page load accordingly.
  2. We also use iframe for generating pdf.
  3. Load third-party web page
  4. we need to put a third-party URL in CSP security so the page can load in Salesforce.

Code :

First, we will store our website link in CSP Trusted Sites.

IFrame in LWC Salesforce
IFrame in LWC Salesforce

lWCIFrame.HTML :

<template>
  <iframe
    src={url}
    height={height}
    width={width}
    referrerpolicy={referrerPolicy}
    sandbox={sandbox}
    title="techdicer"
  ></iframe>
</template>

lWCIFrame.JS :

import { LightningElement, track } from 'lwc';
export default class LWCIFrame extends LightningElement {
    @track height = '900px';
    @track referrerPolicy = 'no-referrer';
    @track sandbox = '';
    @track url = 'https://techdicer.com/';
    @track width = '100%';
}

lWCIFrame.js-meta.xml :

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

use-iframe-in-lwc-salesforce-output

Reference :

  1. LWC
What’s your Reaction?
+1
10
+1
6
+1
5
+1
2
+1
3
+1
4

You may also like

14 comments

Shivraj February 24, 2023 - 5:43 am

Hi I’m unable to get ifream “getting connection refuse error”. I have followed steps which are mentioned here

Reply
Rijwan Mohmmed February 24, 2023 - 6:19 am

Hi Shivraj,
Did you follow all steps, and add site in remote site settings

Reply
Bilal April 13, 2023 - 7:09 am

I tried all possible solutions but still getting “Refused to connect ” error

Reply
Rijwan Mohmmed April 14, 2023 - 5:19 pm

Did you put store website link in CSP Trusted Sites

Reply
madhav May 12, 2023 - 3:02 pm

Hi sir!….

I have created a flow its working fine on my site with the help of experience builder page. but now i need to call that flow directly on my site.

like embedded component in web-page.

and i have founded on resource for that but its not working for me ,

https://medium.com/@justindixon91/hackforce-how-to-place-screen-flows-on-your-website-4d93665f0c9c

plz help me out!!!

Reply
Pankaj June 1, 2023 - 6:35 pm

Hi, I have tried this with the google.com url it was not working, but I have also tried with your blog url it was working I don’t know why will you please help on this?

Reply
Ajay June 27, 2023 - 6:56 am

It fails with this error with google.com in the console.

Refused to display ‘https://www.google.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’

Reply
Rohit Kaplish August 22, 2023 - 12:02 pm

Hello sir,
how can we capture a button click in iframe from lwc?
Thank you

Reply
Rijwan Mohmmed August 22, 2023 - 12:29 pm

No I don’t think so we can interact with Iframe

Reply
Massi September 27, 2023 - 10:36 am

Hello RIJWAN!

Thanks for this article, but do you have any other article talking about generating PDF with Iframe on LWC?

Thanks!

Reply
Rijwan Mohmmed October 3, 2023 - 3:25 pm

Just do one thing here , In VF page put renderas=”pdf” in VF page header it will automatically change to PDF.

Reply
Yash borade February 15, 2024 - 3:47 am

Hello Rijwan,
I have created the above LWC component and added it to the experience cloud, but I passed the Google form in the URL. LWC component shows Google form with an error – “JavaScript isn’t enabled in your browser, so this file can’t be opened. Enable and reload.” I am unable to fill the form. I have also enabled JavaScript in the Chrome browser but the same error is showing, Can you help me to resolve this issue?
Thanks!

Reply
Rijwan Mohmmed February 15, 2024 - 8:08 am

Hi @Yash, Can you book a meeting so I can resolve your issue

Reply
Mostbet Czechia March 19, 2024 - 4:02 am

You actually make it seem so easy with your presentation but I find
this topic to be really something that I think I would never understand.

It seems too complex and very broad for me.
I am looking forward for your next post, I’ll try to get
the hang of it!

Reply

Leave a Comment