Loading
Set Up and Maintain Your Salesforce Organization
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Reconfigure iframe Components

            You are here:

            1. Salesforce Help
            2. Docs
            3. Set Up and Maintain Your Salesforce Organization

            Reconfigure iframe Components

            When a URL is displayed in an inline frame (iframe) on a Visualforce page, it can cause errors in Lightning Experience. Sometimes your URL looks different than you want, or maybe the whole page doesn't load in Lightning Experience. Most iframes are compatible with Visualforce in Lightning Experience. However, if you preview your Visualforce page in Lightning Experience and don't like what you see, you can usually fix it.

            Required Editions

            Available in: Group, Professional, Enterprise, Performance, Unlimited, and Developer Editions
            User Permissions Needed
            To create, edit, or delete Visualforce pages: Customize Application
            To create and save Lightning pages in the Lightning App Builder: Customize Application
            To create and edit custom tabs: Customize Application
            1. Locate the iframe in the Visualforce code.
              1. From Setup, enter Visualforce in the Quick Find box, then select Visualforce Pages.
              2. Click Edit next to the Visualforce page.
              3. Search the Visualforce markup for each of the following: apex:iframe, iframe, and apex:canvasApp.
              Note
              Note Address each instance that you find separately.
            2. If you find any instances of apex:canvasApp, explore these other options to make it available in the UI.
            3. If you find any instances of apex:iframe or iframe, find the source of the iframe.
              1. The source can be found after the src=. If you see $Page, the iframe is referencing another Visualforce page. Otherwise, the source is a URL. 
              <apex:iframe src="{!$Page.AccountListView}"/>

<iframe src="https://salesforce.com"/>
            4. If the source of the iframe is a URL, use a custom web tab instead of the iframe.
              1. Identify the URL. View the Visualforce markup, and find the URL that follows src=.
              2. Remove the reference to the iframe from the markup. Be sure to copy the source URL. 
                <apex:iframe src="https://www.salesforce.com"/>
              3. Save your changes.
              4. Follow these instructions, using the same URL that you copied from the iframe in the Visualforce page.
            5. If the source of the iframe is another Visualforce page, create a Lightning record page to display both Visualforce pages separately.
              1. Identify the Visualforce page. View the Visualforce markup, and find the page name that follows src=”$Page.
              2. Remove the reference to the iframe from the markup. Be sure to make note of the Visualforce page in the iframe. 
                <apex:iframe src="{!$Page.AccountListView}"/>
              3. Go into the properties of each Visualforce page by clicking Edit. Select the Available for Lightning Experience, Experience Builder sites, and the mobile app checkbox. Check the checkbox for both Visualforce pages—the original page and the page embedded in the iframe.
                Screenshot of the "Available for Lightning Experience, Lightning Communities, and the mobile app" checkbox
              4. Use the Lightning App Builder to drag two Visualforce components onto the canvas.
              5. Save and activate your record page.
             
            Loading
            Salesforce Help | Article