[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
-
Create a new directory for your module in the
modules/custom
directory of your Drupal installation. Name your module, for example,iframe_google
. -
Inside your
iframe_google
directory, create two files:iframe_google.info.yml
iframe_google.module
-
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
- Go to your Drupal site's Extend page (
/admin/modules
). - Find "Google Iframe Block" under the Custom category.
- Enable the module.
Step 5: Place the Block
- Navigate to the Block layout page (
/admin/structure/block
). - Place the "Google Iframe Block" in a region of your theme.
- 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
留言
發佈留言