iframe 变量 -回复

js 使用iframe 方法如何使用JavaScript 中的iframe 方法一、什么是iframe 方法iFrame 是HTML 中的一个标签，可以用来在当前页面嵌入另一个页面。

类似于在一个页面中嵌套了另一个完整的页面，并且可以对嵌套的页面进行操作。

在JavaScript 中，我们可以使用iframe 方法来对iFrame 进行控制和操作。

二、如何在HTML 中添加iFrame在HTML 中添加iFrame 非常简单，只需要使用`<iframe>` 标签，并设置src 属性为要嵌入的页面的URL。

例如：html<iframe src="这样，就在当前页面中创建了一个iFrame，并将页面嵌入其中。

三、使用JavaScript 操控iFrame1. 获取iFrame 引用要在JavaScript 中操作一个iFrame，首先需要获取该iFrame 的引用。

我们使用`contentWindow` 属性来获取iFrame 文档对象的引用。

例如：javascriptvar iframe = document.getElementsByTagName('iframe')[0];var iframeContentWindow = iframe.contentWindow;上述代码中，我们首先获取了第一个iframe 元素，然后使用`contentWindow` 属性获取了iFrame 内的文档对象。

2. 在iFrame 中执行JavaScript获取了iFrame 的引用后，我们可以在其中执行JavaScript 代码。

使用`contentWindow` 的`eval` 方法来执行JavaScript 代码。

例如：javascriptvar iframe = document.getElementsByTagName('iframe')[0];var iframeContentWindow = iframe.contentWindow;在iFrame 中执行JavaScript 代码iframeContentWindow.eval('alert("Hello, iFrame!");');上面的代码将在iFrame 中执行JavaScript 代码，并弹出一个包含"Hello, iFrame!" 的弹窗。

iframe.contentWindow属性：关于contentWindow和conten。

定义和⽤法 contentDocument 属性能够以 HTML 对象来返回 iframe 中的⽂档，可以通过所有标准的 DOM ⽅法来处理被返回的对象。

语法：frameObject.contentWindow，或者 iframeObject.contentWindow（不是jquery对象） ⽤iframe嵌套页⾯时，如果⽗页⾯要获取⼦页⾯⾥⾯的内容，可以使⽤contentWindow或者contentDocument，其区别如下： 1、contentWindow 这是个只读属性，返回指定的iframe的窗⼝对象。

它虽然不是标准的⼀部分，但各个主流浏览器都⽀持。

2、contentDocument Firefox ⽀持，IE6，IE7都不⽀持，IE8开始⽀持,需要如此访问 document.frames['J_mainframe'].document。

兼容获取document对象：var getIFrameDoc = function(){var iobj = document.createElement("iframe");document.getElementsByTagName("body")[0].appendChild(iobj);return iobj.contentDocument || iobj.contentWindow.document;} 基本使⽤：1、document.getElementById("myiframe").contentWindow，得到iframe对象后，就可以通过contentWindow得到iframe包含页⾯的window 对象，然后就可以正常访问页⾯元素了；2、$("#myiframe")[0].contentWindow，jquery选择器获得iframe，先把jquery对象转换为DOM对象，或者使⽤get()⽅法转换；3、$("#myiframe")[0].contentWindow.$("#dd").val()，可以在得到iframe的window对象后接着使⽤jquery选择器进⾏页⾯操作；4、$("#myiframe")[0]ername="zhangsan"; 可以通过这种⽅式向iframe页⾯传递参数，在iframe页⾯ername就可以获取到值，username是⾃定义的全局变量；5、在iframe页⾯通过parent可以获得主页⾯的window，接着就可以正常访问⽗亲页⾯的元素了；6、parent.$("#frame_A")[0].contentWindow.document.getElmentById("#frame_B"); 同级iframe页⾯之间调⽤，需要先得到⽗亲的window，然后调⽤同级的iframe得到window进⾏操作；//在⼦级iframe设置⽗级 iframe ，或孙级 iframe ⾼度。

在 JavaScript 中使用 iframe 调用父页面的方法在前端开发中，经常会遇到需要在 iframe 中调用父页面的方法的情况。

iframe 是一种嵌入式窗体，可以将其他网页嵌入到当前页面中。

在某些场景下，我们需要在 iframe 中调用父页面的方法，实现双向通信和交互效果。

本文将介绍如何在JavaScript 中使用 iframe 调用父页面的方法，并提供一些常见的应用场景和示例代码。

1. 如何获取父页面的方法要调用父页面的方法，首先需要获取到父页面的 window 对象。

window 对象代表一个浏览器窗口或一个 iframe，通过它可以访问和操作当前页面的各种属性和方法。

在 iframe 中，可以通过 window.parent 来获取父页面的 window 对象。

下面是一个简单的示例，展示了如何获取父页面的方法：// 在 iframe 当中var parentWindow = window.parent;在上述代码中，使用 window.parent 将父窗口的 window 对象赋值给parentWindow 变量。

之后可以使用 parentWindow 来调用父页面的方法。

2. 调用父页面的方法获取到父页面的 window 对象之后，就可以使用它来调用父页面的方法了。

调用父页面的方法与调用当前页面的方法类似，只需要使用父页面的 window 对象作为调用者即可。

下面是一个简单的示例，展示了如何在 iframe 中调用父页面的方法：// 在 iframe 当中var parentWindow = window.parent;parentWindow.myFunction(); // 调用父页面的 myFunction 方法在上述代码中，通过 parentWindow 调用了父页面的 myFunction 方法。

3. 示例应用场景3.1 数据传递和通信一个常见的应用场景是在 iframe 中进行数据传递和通信。

文章标题：深度探讨React中iframe src变量的应用与实现1. 引言在React开发中，使用iframe元素嵌入其他页面是一种常见的需求。

而针对iframe的src属性，有时需要动态地根据不同的条件来设置。

本文将深入探讨React中iframe src变量的应用与实现方式。

2. React中iframe的基本用法在React中使用iframe，通常会通过JSX语法中的`<iframe>`标签来实现。

而设置iframe的src属性，可以直接将URL作为字符串传递给src属性。

3. 如何动态改变iframe的src属性在React中，有时我们希望能够根据用户的操作或其他条件来动态地改变iframe的src属性。

这时，可以使用state来存储src属性的值，并在需要时修改state的值，从而实现动态改变iframe的src属性。

4. 使用state管理iframe的src属性在React组件中，我们可以使用state来管理iframe的src属性。

通过在constructor中初始化state，然后在需要修改src属性的地方使用setState来更新src属性的值，从而实现动态改变iframe所显示页面的效果。

5. 使用props传递src属性除了使用state管理iframe的src属性之外，我们还可以通过props的方式将src属性传递给iframe组件。

这种方式更适合于父子组件之间传递数据的场景，尤其适用于需要在父组件中动态决定iframe显示的内容的情况。

6. 使用useEffect来动态改变src属性在函数式组件中，可以使用React Hooks中的useEffect来监听特定state的变化，并据此动态改变iframe的src属性。

这种方式能够更灵活地根据各种条件来实现动态改变src属性的效果。

7. 个人观点与总结在React中动态改变iframe的src属性是一项常见且有着广泛应用的需求。

iframe框架⽗页⾯与⼦界⾯之间的变量、函数、元素获取1、获取页⾯上的iframe 1-1、 document.getElementById('iframeId')； 1-2、 window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0]，此处self与window等价，相当于本页⾯的window对象。

1-3、 contentWindow、contentDocument两个属性，也是可以⽤来获取⼦窗⼝， contentWindow 兼容各个浏览器，可取得⼦窗⼝的 window 对象。

contentDocument Firefox ⽀持，> ie8 的ie⽀持。

可取得⼦窗⼝的 document 对象。

2、⼦页⾯访问⽗页⾯元素： parent.document.getElementById('id')和document相关的⽅法都可以这样⽤；3、⽗页⾯访问⼦页⾯元素： document.getElementById('iframeId').contentWindow.document.getElementById("id"); contentWindow后跟document相关⽅法 window.frames[0].contentWindow.document.getElementById("id");4、⼦页⾯访问⽗页⾯变量： parent.a；或者调⽤⽗页⾯有返回值的函数解决。

5、⽗页⾯访问⼦页⾯变量： ⽗页⾯声明全局变量，⼦页⾯复制修改；或者调⽤⼦页⾯有返回值的函数解决。

frames[0].a;6、⼦页⾯访问⽗页⾯⽅法： window.parent.parentMethod();7、⽗页⾯访问⼦页⾯⽅法： document.getElementById('iframeId').contentWindow.iframeMethod(); frames[0].iframeMethod();8、兄弟框架之间调⽤： self.parent.frames['child1']; self.parent.frames['child2'];9、多层框架的调⽤： window.frames[0].frames[2]; window.frames['child_1'].frames['sub_child_3'];。

js 修改iframe[js 修改iframe]是指使用JavaScript语言来修改网页中的iframe元素。

iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。

通过使用JavaScript，我们可以动态地修改iframe的属性、内容以及样式。

下面将一步一步回答关于[js 修改iframe]的相关问题。

第一步：获取iframe元素首先，我们需要使用JavaScript来获取要修改的iframe元素。

要通过JavaScript获取iframe元素，可以使用getElementById()方法，该方法根据元素的id属性值来获取元素。

例如，如果我们的iframe元素的id为"myIframe"，我们可以使用以下代码来获取该元素：const iframe = document.getElementById('myIframe');通过上述代码，我们将iframe元素保存到了变量iframe中，以便后续的修改。

第二步：修改iframe的属性接下来，我们可以通过修改iframe的属性来实现一些特定的效果。

例如，我们可以通过修改iframe的src属性来改变嵌入页面的源URL。

下面的代码演示了如何修改iframe的src属性：iframe.src = '上述代码将iframe的src属性修改为'除了src属性之外，还可以修改iframe的其他属性，如width、height、frameborder等。

通过修改这些属性，我们可以调整iframe的大小、边框等外观。

第三步：操作iframe的内容除了修改属性，我们还可以通过JavaScript来操作iframe的内容。

通过访问iframe的contentDocument属性，我们可以获取嵌入页面的文档对象。

一旦我们获取到文档对象，就可以像操作普通的HTML文档一样来修改iframe内部的内容。

例如，我们可以通过以下代码将iframe内部的文本更改为"Hello, World!"：iframe.contentDocument.body.textContent = 'Hello, World!';上述代码将iframe内部的body元素的textContent属性修改为"Hello, World!"，以实现更改文本内容的效果。

JS如何对Iframe内外页⾯进⾏操作总结⽬录在iframe外获取iframe⾥的内容⽅式⼀⽅式⼆在iframe内获取iframe外的内容在iframe中调⽤⽗页⾯中定义的⽅法和变量在⽗页⾯操作iframe⼦页⾯的⽅法和变量总结判断iframe加载完成不同域通信在iframe外获取iframe⾥的内容⽅式⼀通过contentWindow和contentDocument这两个API:var iframe = document.getElementById("iframe1");var iwindow = iframe.contentWindow;var idoc = iwindow.document;var idocument = iframe.contentDocument;console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc); //获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的html其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取iframe的document对象。

⽅式⼆结合Name属性，通过window提供的frames获取:<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes"><p>Your browser does not support iframes.</p></iframe><script type="text/javascript">console.log(window.frames['ifr2'].window);console.dir(document.getElementById("iframe").contentWindow);</script>在iframe内获取iframe外的内容window.parent 获取上⼀级的window对象，如果还是iframe则是该iframe的window对象window.top 获取最顶级容器的window对象，即，就是你打开页⾯的⽂档在iframe中调⽤⽗页⾯中定义的⽅法和变量window.parent.window.parentMethod();window.parent.window.parentValue;在⽗页⾯操作iframe⼦页⾯的⽅法和变量window.frames["iframe_Name"].window.childMethod();window.frames["iframe_Name"].window.childValue;总结在使⽤Iframe时还需要注意以下两点：1. 要确保在iframe加载完成后再进⾏操作，如果iframe还未加载完成就开始调⽤⾥⾯的⽅法或变量，会产⽣错误；2. 如果iframe所链接的是外部页⾯，因为安全机制不能使⽤同域名下的通信⽅式；判断iframe加载完成iframe.onload = function() {// TODO}不同域通信⽗页⾯向⼦页⾯传递数据利⽤location对象的hash值，通过它传递通信数据。

vue3中对iframe实现无刷新的方法在Vue3中实现无刷新的iframe可以通过以下几种方法实现：1. 使用v-if和key结合的动态渲染方法：在Vue3中，可以使用v-if指令来动态控制iframe的显示和隐藏。

通过在data中定义一个变量来控制iframe的显示状态，然后通过改变这个变量的值来实现无刷新的效果。

同时，使用key来标识不同的iframe，这样可以避免组件复用时的问题。

```<iframe v-if="showIFrame" :key="iframeKey" :src="iframeUrl"></iframe> ```2. 使用ref和watchEffect的方法：在Vue3中，可以使用ref来创建响应式的变量，然后使用watchEffect监听这个变量的变化，并在变化时执行相应的操作。

通过改变这个ref的值来实现无刷新的效果。

```<template><div><iframe ref="iframe" :src="iframeUrl"></iframe></div></template><script>import { ref, watchEffect } from 'vue'; export defaultsetuconst showIFrame = ref(false);const iframe = ref(null);watchEffect(( =>if (showIFrame.value)const iframeSrc = iframe.value.src; iframe.value.src = '';iframe.value.src = iframeSrc;}});function toggleIFramshowIFrame.value = !showIFrame.value; }returnshowIFrame,toggleIFrame,iframe}}</script>```3. 使用Vue Router和Keep-Alive的方法：在Vue3中，可以使用Vue Router来管理不同页面的切换，并结合Keep-Alive组件来缓存页面的状态。

vue 使用iframe里面的方法1. 介绍iframe的基本概念在网页开发中，iframe是一种非常常用的标签，它可以让开发者在一个网页中嵌入另一个网页，并且可以在其中展示其他页面的内容。

在前端开发中，为了实现一些特定的需求，我们可能会需要在Vue组件中使用iframe，来展示其他页面的内容或者与其他页面进行交互。

2. 在Vue中使用iframe的方式在Vue中，我们可以通过在template中直接使用iframe标签来嵌入其他页面的内容。

例如：```<template><div><iframe src=""></iframe></div></template>```如上所示，我们可以直接在Vue组件的模板中使用iframe标签，并通过src属性指定要展示的页面信息。

3. 与iframe进行交互有时候，我们可能需要与iframe中的页面进行交互，例如调用其中的方法或获取其中的数据。

在Vue中，我们可以通过ref属性来获取iframe元素的引用，然后通过JavaScript来操作它。

例如：```<template><div><iframe ref="myFrame" src=""></iframe><button click="callIframeMethod">调用iframe中的方法</button></div></template><script>export default {methods: {callIframeMethod() {const iframe = this.$refs.myFrame;const iframeWindow = iframe.contentWindow;iframeWindow.postMessage({ type: 'callMethod', methodName: 'doSomething' }, '*');}}}</script>```如上所示，我们可以通过ref属性获取到iframe元素的引用，并通过contentWindow属性获取到iframe中的window对象，进而调用其中的方法。

iframe 子元素调用父元素的方法在网页开发中，我们经常会使用到 iframe 元素，它可以将另一个网页嵌入到当前页面之中，实现代码和页面的复用，提高网页的性能。

在此基础上，我们还会遇到一种情况，那就是在 iframe 子元素中需要调用父元素中的方法。

这种情况下，我们可以借助JavaScript 提供的一些方法来实现。

1. window.parent 方法我们可以使用 window.parent 来获取当前 iframe 的父窗口，然后再调用父窗口中的方法。

这种方法比较简单，也比较常用，实现起来也非常容易。

代码如下：```javascriptwindow.parent.methodName();```methodName 是父窗口中的方法名称。

需要注意的是，使用此方法时，父窗口和子窗口必须在同一个域名下，否则会出现跨域问题，导致无法调用父窗口中的方法。

2. parent 方法如果父窗口和子窗口在同一个域名下，我们也可以直接使用 parent 方法来调用父窗口中的方法。

代码如下：```javascriptparent.methodName();```methodName 是父窗口中的方法名称。

这种方法与 window.parent 方法类似，只是写法稍有不同。

需要注意的是，如果父窗口和子窗口不在同一个域名下，同样会出现跨域问题。

3. postMessage 方法使用 postMessage 方法可以在不同窗口之间进行通信，包括父窗口和子窗口之间。

这种方法可以实现非常灵活的交互，但是需要一定的代码量来实现。

代码如下：在父窗口中：```javascript// 监听子窗口发送的消息window.addEventListener('message', function(e) {if (e.origin == '子窗口的域名') {// 处理子窗口发送的消息}}, false);// 设置子窗口var iframe = document.getElementById('iframe');var win = iframe.contentWindow;// 发送消息到子窗口win.postMessage('Message from parent', '子窗口的域名');```在子窗口中：```javascript// 监听父窗口发送的消息window.addEventListener('message', function(e) {if (e.origin == '父窗口的域名') {// 处理父窗口发送的消息}}, false);// 发送消息到父窗口window.parent.postMessage('Message from child', '父窗口的域名'); ```postMessage 方法的第一个参数是要传递的消息，第二个参数是接收消息的窗口的域名。

iframe 调用父类方法在网页开发中，iframe作为一种常用的网页元素，可以实现页面内容的嵌套展示。

在某些场景下，我们需要在iframe中调用父类方法，以实现一些特定的功能。

那么，如何实现这一目标呢？以下是一种常用的方法。

首先，我们需要了解如何在iframe中调用父类方法。

通常情况下，我们可以使用JavaScript的`window.parent`对象来访问父窗口。

例如，假设我们在父窗口中定义了一个名为`parentFunction`的函数，我们可以在iframe中通过以下方式调用它：```javascriptwindow.parent.parentFunction();```此外，我们还可以通过`window.parent`对象访问父窗口中的其他对象和方法。

例如，如果父窗口中有一个名为`parentVar`的变量，我们可以在iframe 中这样访问它：```javascriptvar parentVar = window.parent.parentVar;```然而，在实际应用中，直接调用父类方法可能会导致一些问题。

例如，当父窗口中的方法依赖于子窗口时，父窗口的方法可能会因为失去子窗口的引用而引发错误。

为了解决这个问题，我们可以使用事件冒泡的方式，让父窗口主动调用子窗口的方法。

具体做法是：在子窗口中注册一个事件监听器，监听父窗口触发的事件。

当父窗口触发事件时，子窗口可以调用相应的方法处理事件。

这样，既可以实现子窗口调用父窗口方法，又可以避免因失去子窗口引用而引发的问题。

总之，在iframe中调用父类方法是一种常见的需求，我们可以通过`window.parent`对象来实现。

但在实际应用中，我们需要注意处理事件冒泡，以避免潜在的问题。

同时，为了更好地实现跨窗口通信，可以使用`window.postMessage`方法进行跨域通信。

vue 嵌入的iframe获取父类窗口的方法-概述说明以及解释1.引言1.1 概述概述部分的内容是对整篇文章的简要介绍，主要阐述文章将讨论的主题和问题。

下面是概述部分的一个可能的写作示例：概述：在Vue开发中，有时我们需要在应用中嵌入一个iframe，以便展示其他网页或应用。

然而，当我们在嵌入的iframe中需要获取父窗口的一些信息或执行一些操作时，面临一些挑战。

本文将探讨在Vue中嵌入iframe的方法，并重点讨论如何在嵌入的iframe中获取父窗口的方法。

首先，我们将介绍在Vue中嵌入iframe的常见方法和技巧，包括如何设置iframe的src属性以加载其他网页或应用。

然后，我们将深入研究在嵌入的iframe中如何获取父窗口的方法和技巧。

我们将探讨使用postMessage API进行跨窗口通信的方式，并提供一些实际应用案例，以帮助读者更好地理解嵌入iframe获取父窗口的概念和实际操作。

最后，我们将总结本文的主要观点和讨论，并提供一些建议，供Vue 开发者在实际项目中应用这些技巧和方法。

此外，我们还会提到本研究的局限性，并探讨未来进行更深入研究的可能方向。

通过本文的阅读，读者将能够全面了解在Vue开发中嵌入iframe并获取父窗口的方法和技巧，为他们在实际项目中解决类似问题提供一些有价值的参考和指导。

1.2 文章结构本文将分为三个主要部分来讨论vue嵌入的iframe如何获取父类窗口的方法。

首先，引言部分将对整篇文章进行概述，介绍文章的目的和结构。

接下来，正文部分将详细讨论vue中嵌入iframe的方法和iframe如何获取父类窗口的技巧。

最后，结论部分将对整篇文章进行总结，并提供一些对于Vue开发者的建议。

此外，我们还将探讨研究的局限性以及未来研究的方向。

在正文部分的第一节（2.1 Vue中嵌入iframe的方法），我们将介绍如何在Vue项目中嵌入iframe，并提供一些常用的方法和技巧。

iframe内嵌及跨域通信（iframe跨域内嵌⽹页iframe刷新重载postMessa。

iframe内嵌及跨域通信iframe跨域内嵌⽹页 iframe刷新重载 postMessage 事件监听前⾔对于iframe标签，现在都应该⽤的很少了因为它存在⼀些问题，⽐如安全问题或者能耗⾼，但最近笔者就使⽤了它做⽹页内嵌并跨域处理了数据，所以记录记录。

iframe基本概念<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>iframe的⼀些基本属性：src iframe页⾯地址，有同域跨域之分height iframe⾼度width iframe宽度name iframe命名，可通过window.frames[xxx]被调⽤scrolling iframe滚动模式sandbox html5新特性，⽤于限制iframe的功能使⽤iframe的正确姿势可以通过以下选择器来获取iframe节点(window.frames['xxx']的⽅式好像已经不能⽤了)：1 document.getElementById('iframeId')23 document.getElementsByName('iframeName')45 document.getElementsByClassName('iframeClassName')67 document.getElementsByTagName('iframe')89 document.querySelector('#iframeId')1011 document.querySelector('.iframeClassName')我们可以通过contentWindow和contentDocument两个API获取iframe的window对象和document对象。

vue iframe的用法
Vue中使用iframe的步骤相对简单。

首先，需要在Vue组件中引入iframe标签。

然后，在data中定义一个变量来存储iframe的url。

最后，在template中使用v-bind指令将变量绑定到iframe的src属
性上。

具体的步骤如下：
1. 在Vue组件中引入iframe标签，如：
```
<template>
<iframe></iframe>
</template>
```
2. 在data中定义一个变量来存储iframe的url，如：
```
<script>
export default {
data() {
return {
iframeUrl: ''
}
}
}
</script>
```
3. 在template中使用v-bind指令将变量绑定到iframe的src
属性上，如：
```
<template>
<iframe v-bind:src="iframeUrl"></iframe>
</template>
```
这样，在组件渲染时，iframe标签的src属性就会自动加载变量所存储的url对应的页面。

注意: 由于安全原因，浏览器可能会限制以iframe嵌套外部网页，特别是跨域的情况。

在使用iframe时，请确保所嵌套的网页是可信的，以避免安全风险。

vue3setup中访问iframe页面的方法要在Vue3中访问iframe页面，您可以按照以下步骤进行设置：1. 在Vue3的`setup(`函数中，使用`ref`来创建一个响应式的变量，用于存储iframe的引用。

例如：```javascriptimport { ref } from 'vue';e某port defaultsetuconst iframeRef = ref(null);returniframeRef};}};```2. 在Vue3中，您可以使用`onMounted`钩子函数来在组件挂载后执行某个操作。

在这里，我们可以使用`onMounted`来获取iframe元素的引用。

```javascriptimport { ref, onMounted } from 'vue';e某port defaultsetuconst iframeRef = ref(null);onMounted(( =>const iframe = iframeRef.value;// 在这里可以访问iframe页面或执行其他操作console.log(iframe.contentDocument);});returniframeRef};}};```3. 在Vue3中，使用`ref`创建的响应式变量的值可以通过在模板中使用`v-bind`来绑定元素的引用。

例如，我们可以将iframe元素的引用传递给`iframeRef`变量。

```html<template></template>``````javascriptimport { ref, onMounted } from 'vue'; e某port defaultsetuconst iframeRef = ref(null); onMounted(( =>const iframe = iframeRef.value; console.log(iframe.contentDocument); });returniframeRef};}};```通过上述步骤，您可以在Vue3中成功访问iframe页面。

iframe子页面获取父页面的会话在网页开发中，有时候我们需要在一个页面中嵌入另一个页面，这时候就会用到iframe（内联框架）技术。

iframe可以将一个网页嵌入到另一个网页中，实现页面的嵌套显示。

在实际应用中，我们可能会遇到需要在iframe子页面中获取父页面的会话标题的需求。

本文将介绍如何通过iframe子页面获取父页面的会话标题。

我们需要了解什么是会话标题。

会话标题是指浏览器标签栏上显示的网页标题，也是搜索引擎结果页中显示的网页标题。

会话标题对于网页的SEO（搜索引擎优化）非常重要，它可以影响网页在搜索结果中的排名。

在实际应用中，我们可以通过JavaScript代码来获取父页面的会话标题。

以下是实现的步骤：步骤一：在父页面中设置会话标题在父页面的<head>标签中，我们可以使用<title>标签来设置网页的会话标题。

例如，我们可以设置会话标题为“父页面标题”。

步骤二：在子页面中获取父页面的会话标题在子页面中，我们可以使用JavaScript的window对象来获取父页面的会话标题。

以下是获取父页面会话标题的代码：```javascriptvar parentTitle = window.parent.document.title;```上述代码通过window.parent.document.title来获取父页面的会话标题，并将其赋值给变量parentTitle。

步骤三：在子页面中使用父页面的会话标题在子页面中，我们可以使用获取到的父页面的会话标题来进行相关操作。

例如，我们可以将其显示在子页面的某个位置，或者将其用于其他用途。

以上就是通过iframe子页面获取父页面的会话标题的方法。

通过这种方法，我们可以在子页面中获取并使用父页面的会话标题，实现更加灵活的网页设计和功能实现。

需要注意的是，由于浏览器的同源策略限制，我们只能在同一个域名下的页面中进行父子页面之间的通信。

2021.04.28（属性名的遍历、Symbol.for（），Symbol.keyFor（。

属性名的遍历Symbol 作为属性名，遍历对象的时候，该属性不会出现在 for...in 、 for...of 循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 返回。

但是，它也不是私有属性，有⼀个 Object.getOwnPropertySymbols() ⽅法，可以获取指定对象的所有 Symbol 属性名。

该⽅法返回⼀个数组，成员是当前对象的所有⽤作属性名的 Symbol 值。

1. const obj = {};2. let a = Symbol('a');3. let b = Symbol('b');4.5. obj[a] = 'Hello';6. obj[b] = 'World';7.8. const objectSymbols = Object.getOwnPropertySymbols(obj);9.10. objectSymbols11. // [Symbol(a), Symbol(b)]上⾯代码是 Object.getOwnPropertySymbols() ⽅法的⽰例，可以获取所有 Symbol 属性名。

下⾯是另⼀个例⼦， Object.getOwnPropertySymbols() ⽅法与 for...in 循环、 Object.getOwnPropertyNames ⽅法进⾏对⽐的例⼦。

1. const obj = {};2. const foo = Symbol('foo');3.4. obj[foo] = 'bar';5.6. for (let i in obj) {7. console.log(i); // ⽆输出8. }9.10. Object.getOwnPropertyNames(obj) // []11. Object.getOwnPropertySymbols(obj) // [Symbol(foo)]上⾯代码中，使⽤ for...in 循环和 Object.getOwnPropertyNames() ⽅法都得不到 Symbol 键名，需要使⽤ Object.getOwnPropertySymbols() ⽅法。