[Decoupled Preview drupal 11] iframe module

 To create a Drupal block module that embeds an iframe with the website Google.com, you'll need to go through several steps to properly set up the module, define a block, and ensure it integrates seamlessly within your Drupal site. Here’s how you can do this in Drupal 9 or Drupal 8:

Step 1: Create the Module Folder and Files

  1. Create a new directory for your module in the modules/custom directory of your Drupal installation. Name your module, for example, iframe_google.

  2. Inside your iframe_google directory, create two files:

    • iframe_google.info.yml
    • iframe_google.module
  3. Create a src/Plugin/Block directory inside your module folder for your block plugin.

Step 2: Define the Module Info File

Add the following content to iframe_google.info.yml:

name: 'Google Iframe Block'
type: module
description: 'Provides a block with an iframe displaying Google.'
core_version_requirement: ^8 || ^9
package: Custom
dependencies:
  - drupal:block

Step 3: Define the Block Plugin

Inside the src/Plugin/Block directory, create a file named GoogleIframeBlock.php. Add the following PHP code:

<?php

namespace Drupal\iframe_google\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'GoogleIframe' Block.
 *
 * @Block(
 *   id = "google_iframe_block",
 *   admin_label = @Translation("Google Iframe Block"),
 *   category = @Translation("Custom"),
 * )
 */
class GoogleIframeBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [
      '#type' => 'inline_template',
      '#template' => '<iframe src="https://www.google.com" width="100%" height="500px" frameborder="0"></iframe>',
      '#allowed_tags' => ['iframe'],
    ];
    return $build;
  }
}

This code defines a new block that outputs an iframe containing Google.com. Note that you should consider the security implications and cross-origin policies when embedding content from external sites.

Step 4: Install Your Module

  1. Go to your Drupal site's Extend page (/admin/modules).
  2. Find "Google Iframe Block" under the Custom category.
  3. Enable the module.

Step 5: Place the Block

  1. Navigate to the Block layout page (/admin/structure/block).
  2. Place the "Google Iframe Block" in a region of your theme.
  3. Configure the block visibility settings as needed.

Important Note

Embedding sites like Google.com in iframes can be problematic due to security policies like X-Frame-Options or Content Security Policy (CSP) set by the external site to prevent clickjacking attacks. Google.com, specifically, does not allow being embedded in an iframe. You will see an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

For demonstration purposes or testing with sites that allow it, you can replace "https://www.google.com" with another website that permits iframe embedding.

This module setup will help you embed a compliant website in an iframe within a Drupal block. Adjust the iframe properties as needed, such as dimensions or additional attributes, to fit the design of your Drupal site.


======================================================

Configure block > Pages > /*/edit > Hide for the listed pages > Save



if specific content type add hide content css

留言

此網誌的熱門文章

Install Drupal 10 with composer in XAMPP htdocs OR PHP Command

fix drupal 11 install error

[custom block module]Correcting Heredoc Syntax and Attaching JS