Question

使用embed标签，将页面（embed.html）附加到主页（index.html）。如何使用Javascript从index.html访问嵌入式页面的内容？

主页（index.html）具有以下代码：


<!DOCTYPE html>
<html>
<body>

<!-- Tile outside -->

<h1 id='titleOutsideOfTheEmbedTag'>The Title Outside Of The Embed Tag</h1>

<!-- Embed tag -->

<embed id='embedTag' src='embed.html' width='600' height='400'></embed>

<!-- Buttons -->

<div><button onclick='changeTitleOutsideOfTheEmbedTag()'>Change The Title <strong>Outside</strong> Of The Embed Tag</button></div>
<div><button onclick='changeTitleInsideOfTheEmbedTag()'>Change The Title <strong>Inside</strong> Of The Embed Tag</button></div>

<!-- Functions -->

<script>

// Change the title outside of the embed tag

function changeTitleOutsideOfTheEmbedTag() {

    document.getElementById('titleOutsideOfTheEmbedTag').innerHTML = 'The Title Outside Of The Embed Tag Has Changed';

}

// Change the title inside of the embed tag

function changeTitleInsideOfTheEmbedTag() {

    // I already tried with the following:

    document.getElementById('embedTag').contentWindow.getElementById('titleInsideOfTheEmbedTag').innerHTML = 'The Title Inside Of The Embed Tag Has Changed';

    // document.getElementById('embedTag').contentDocument.getElementById('titleInsideOfTheEmbedTag').innerHTML = 'The Title Inside Of The Embed Tag Has Changed';

}

</script>

</body>
</html>

嵌入式页面（embed.html）具有以下代码：


<!DOCTYPE html>
<html>
<body>

<!-- Set the background color to easily differentiate between the two -->

<style>

body {
    background-color: gray
}

</style>

<!-- Tile inside -->

<h1 id='titleInsideOfTheEmbedTag'>The Title Inside Of The Embed Tag</h1>

</body>
</html>

我可以更改index.html的标题，但是如何更改嵌入式页面上的标题？

Answer 1

在embed.html中添加onload函数，并提供指向父html的链接：

function init() {
    parent.embedDocument = this.document;
}

在index.html中，使用以下代码：

function changeTitleInsideOfTheEmbedTag() {
    embedDocument.getElementById('titleInsideOfTheEmbedTag').innerHTML = 'The Title Inside Of The Embed Tag Has Changed';
}

这两个文件都已更新：

index.html

<!DOCTYPE html>
<html>
<body>

<!-- Tile outside -->

<h1 id='titleOutsideOfTheEmbedTag'>The Title Outside Of The Embed Tag</h1>

<!-- Embed tag -->

<embed id='embedTag' src='embed.html' width='600' height='400'></embed>

<!-- Buttons -->

<div><button onclick='changeTitleOutsideOfTheEmbedTag()'>Change The Title <strong>Outside</strong> Of The Embed Tag</button></div>
<div><button onclick='changeTitleInsideOfTheEmbedTag()'>Change The Title <strong>Inside</strong> Of The Embed Tag</button></div>

<!-- Functions -->

<script>

// Change the title outside of the embed tag

function changeTitleOutsideOfTheEmbedTag() {

    document.getElementById('titleOutsideOfTheEmbedTag').innerHTML = 'The Title Outside Of The Embed Tag Has Changed';

}

// Change the title inside of the embed tag

function changeTitleInsideOfTheEmbedTag() {

    embedDocument.getElementById('titleInsideOfTheEmbedTag').innerHTML = 'The Title Inside Of The Embed Tag Has Changed';

}

</script>

</body>
</html>

embed.html

<!DOCTYPE html>
<html>
<body onload="init()">

<!-- Set the background color to easily differentiate between the two -->

<style>

body {
    background-color: gray
}

</style>

<!-- Tile inside -->

<h1 id='titleInsideOfTheEmbedTag'>The Title Inside Of The Embed Tag</h1>

<script>
    function init() {
        parent.embedDocument = this.document;
    }
</script>

</body>
</html>

重要

仅当文件来自同一网站时，此解决方案才有效！如果直接从本地驱动器将文件加载到浏览器中，将无法正常工作。

这是same-origin policy

的限制

Javascript-访问带有嵌入标签的页面的内容

1 个答案:

index.html

embed.html

重要