iframe的用法以及怎么获取iframe的元素

最新推荐文章于 2024-04-22 09:42:30 发布

喜欢九月

最新推荐文章于 2024-04-22 09:42:30 发布

阅读量2.3k

点赞数 11

文章标签： javascript

本文链接：https://blog.csdn.net/m0_74641039/article/details/135446692

版权

本文介绍了IFrame的基本概念，展示了如何在HTML中使用它作为嵌入文档的框架，以及如何在IFrame内外之间获取和操作元素，包括处理跨域问题。

摘要由CSDN通过智能技术生成

1.什么是iframe

IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

2.iframe的用法

iframe必须搭配a标签一起使用，用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./box.html" target="ifr">点击切换</a>
    <iframe src="" frameborder="0" name="ifr" style="width: 600px;height: 600px;" class="ifra">

    </iframe>
    <button onclick="getDiv()">获取里面的div按钮</button>
</body>
<script>
    function getDiv(){
        console.log(document.getElementsByClassName("ifra")[0].contentWindow.document);
        console.log(document.getElementsByClassName("ifra")[0].contentWindow.document.getElementsByClassName);
    }
</script>
</html>

我们再创建一个需要更换的页面，取名为box.html,给图中的div设置点击事件，点击获取本身
在这里插入图片描述
点击a标签切换，iframe就相当于你的屏幕，box.html就是页面

3.怎么在iframe里面获取iframe以外的元素

当用iframe切换页面时，点击里面的函数时常会报错（获取不到xx元素）

<script>
//从ifmare页面里的事件获取iframe外的页面，可以获取到iframe以外的整个页面
//之后只需使用getElements获取就行了
window.parent.document
</script>

4.怎么在iframe外获取iframe内的元素

当用iframe切换页面时，点击里面的函数时常会报错（获取不到xx元素）

<script>
//第一个代码块已经是写了这里我复述一下
//先获取iframe整个元素
//之后iframe.contentWindow.document就可以获取到需要切换的页面了
//之后只需使用getElements获取需要的元素即可
document.getElementsByClassName("ifra")[0].contentWindow.document.getElementsByClassName
</script>