html-iframe_HTML iframe

html-iframe

iframe (Iframes)

In HTML, iframes are used to display a webpage inside another webpage.

在HTML中, iframe用于在另一个网页内显示一个网页。

Syntax:

句法:

<iframe src="URL"></iframe>

The <iframe> tag is used to define an iframe. And the src attribute is used to specify the location (URL) of the webpage that is to be included.

<iframe>标记用于定义iframe。 src属性用于指定要包含的网页的位置(URL)。

iframe广告代码属性 (Iframe Tag properties)

Some of the common properties of the iframe are,

iframe的一些常见属性是

i) height and width properties

i)高度和宽度属性

The size of the iframe is defined in HTML using height and width properties.

iframe的大小是使用HTML的height和width属性定义的。

Method 1: In HTML using height and width attribute, the default unit to define the values in pixels.

方法1:在使用height和width属性HTML中,默认单位以像素为单位定义值。

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" width="500" heigth="200"></iframe>
</body>

</html>

Output

输出量

HTML iframe example 1

Method 2: In CSS using height and width of iframe.

方法2:在CSS中使用iframe的高度和宽度。

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="height:400px; width:500px"></iframe>
</body>

</html>

Output

输出量

HTML iframe example 2

ii) Iframe borders (The border property)

ii)iframe边框(border属性)

In iFrames, there is a default border around it. You can define the border for the iframe in HTML using CSS border property.

在iFrame中,它周围有一个默认边框。 您可以使用CSS border属性为HTML中的iframe定义边框。

<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="border: 2px dotted green"></iframe>
</body>

</html>

Output

输出量

HTML iframe example 3
<!DOCTYPE html>

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to define height and width in iframe</p>
    <iframe src="https://www.includehelp.com/" style="border: none;"></iframe>
</body>

</html>

Output

输出量

HTML iframe example 4

iii) Changing link in iframe

iii)在iframe中更改链接

In the iframe, the link can be changed for the iframe to the next link in an event. The attribute target and name are required.

在iframe中,可以将iframe的链接更改为事件中的下一个链接。 属性目标和名称是必需的。

The name attribute defines the name iframe whose link is to be redefined.

name属性定义要重新定义其链接的名称iframe。

The target attribute is defined in another tag with the same value as the name of the iframe and will be used to replace the src of the iframe.

target属性是在另一个标签中定义的,该标签的值与iframe的名称相同,并将用于替换iframe的src 。

<html>

<head>
</head>

<body>
    <h1>Iframes in HTML </h1>
    <p>Example to replace link in iframe</p>
    <iframe src="https://www.includehelp.com/" name="iframe1" width="500" height="450"></iframe>
    <br>
    <a href="https://www.includehelp.com/scala/" target="iframe1">Lets see my new article</a>
</body>

</html>

Output

输出量

HTML iframe example 5


After cliking on the link...

点击链接后...



HTML iframe example 6

翻译自: https://www.includehelp.com/html/iframes.aspx

html-iframe

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Moodle-mod_hvp是Moodle平台上的一种插件,它可以用于创建交互式H5P内容。而在moodle-mod_hvp中,embed.php文件则用于将H5P内容嵌入到Moodle中。 下面是embed.php文件的详解: 1. 首先,通过require_once函数引入Moodle的config.php文件,以便在后面使用Moodle的全局变量和函数。 ``` require_once(dirname(dirname(dirname(__FILE__))) . '/config.php'); ``` 2. 接着,获取当前用户的上下文信息,并根据上下文信息确定当前用户是否有权限查看该H5P内容。 ``` $cmid = required_param('id', PARAM_INT); $course_module = get_coursemodule_from_id('hvp', $cmid, 0, false, MUST_EXIST); $course = $DB->get_record('course', array('id' => $course_module->course), '*', MUST_EXIST); $hvp = $DB->get_record('hvp', array('id' => $course_module->instance), '*', MUST_EXIST); $context = context_module::instance($course_module->id); require_login($course, true, $course_module); require_capability('mod/hvp:view', $context); ``` 3. 接下来,根据H5P内容的类型(package类型或content类型)决定如何获取H5P内容的数据。 ``` if ($hvp->embedtype == 'package') { $fs = get_file_storage(); $files = $fs->get_area_files($context->id, 'mod_hvp', 'package', $hvp->package, 'id'); if (count($files) !== 1) { print_error('embedfilenotfound', 'mod_hvp', '', $hvp->package); } $file = reset($files); send_stored_file($file, 0, 0, true); } else { $json = hvp_print_content($hvp, true); $position = strpos($json, '{'); $json = substr($json, $position); $json = json_decode($json, true); $content = $json['library']['embedTypes'][0]['url']; echo html_writer::start_tag('iframe', array( 'src' => $content, 'frameborder' => 0, 'allowfullscreen' => true, 'webkitallowfullscreen' => true, 'mozallowfullscreen' => true, 'width' => $hvp->width, 'height' => $hvp->height )); echo html_writer::end_tag('iframe'); } ``` 4. 如果H5P内容的类型是package类型,则从文件存储中获取H5P包,如果获取失败,则输出错误信息;如果H5P内容的类型是content类型,则通过调用hvp_print_content函数获取H5P内容的数据,并从中解析出H5P内容的URL,最后通过iframe将H5P内容嵌入到Moodle中。 以上就是embed.php文件的详解,希望可以帮助你理解该文件的作用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值