怎么在iframe页面操作子页面里的对象

小和尚同志 2018-09-08 02:40:50

我想在iframe的父页面去操作子页面里的内容，但是现在父页面一直获取不到子页面的对象。
这是代码：



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>iframe</title>

    <style>

       *{

            margin: 0;

            padding:0;

        }

        .testBox{

            width: 100%;

            background:gray;

        }

        .iframeTest{

            background:papayawhip;

        }

    </style>

</head>

<body>

    <div class="testBox">

        <iframe src="iframe.html" style="height:100%" frameborder="0" id="iframeTest" scrolling="no"></iframe>

    </div>

</body>

</html>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>

var str = $("#iframeTest").contents().find("#test");

console.log(str.html());

</script>

这个是子页面：



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>iframe1</title>

</head>

<body>

    <p id="test">哈哈，这是一个测试</p>

</body>

</html>

结果打印出来以后是undefind;
怎么样才能获取到子页面的对象呢？

...全文

153 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-09-08

打赏
举报

获取代码是正确的，不过你要等框架内页面加载完成后才能获取
另外在一些浏览器中可能不支持file://协议的页面跨框架获取，需要以http://协议访问页面

<body>

<script>

function ifrload(event){

	var str = $("#iframeTest").contents().find("#test");

	console.log(str.html());

}

</script>

    <div class="testBox">

        <iframe src="iframe.html" onload="ifrload(event)" style="height:100%" frameborder="0" id="iframeTest" scrolling="no"></iframe>

    </div>

</body>

</html>