Question

我目前遇到的问题包括来自另一个文件的帧中图像，我正在做的是创建一个带有代码的两个框架的html页面：

<html>

<frameset cols="20%,80%">
<frame src="aa.html" id="1">
<frame src="" id="2">

</frameset>

</html>

然后，在aa.html中有三个链接，在单击第一个链接时，图像应在框架中打开，其中id =＆＃34; 2＆＃34;。

aa.html

<html>

<head>
<link rel="import" href="cook.html">
<script>
function fun1()
{
    document.getElementById('2').src="b.html";
}
</script>
</head>
<body>
<a href="#" onclick="fun1()">Home1</a>
<a href="fdsf">Hom2</a>
<a href="fdsf">Home3</a>
</body>

</html>

然后b.html在框架中显示图像，如下所示：

<html>
<head>
</head>
<body>
<img src="ima.png"/>
</body>
</html>

但这不起作用。提前谢谢。

Answer 1

你不能以这种方式做你想做的事。

此功能：

    function fun1() {
        document.getElementById('2').src="b.html";
    }

正在IFRAME中工作，而不是在MAIN WINDOW中。试试看window.postMessage方法。

UPDATE 使用window.postMessage看起来像这样：

1）在子窗口中将是功能

  function fun1() {
   window.postMessage(JSON.stringify({"id":2,"src":"b.html"}),'http://parent.window.com');
  }

2）在父窗口中，你应该监听这个事件，所以添加页面开头：

window.addEventListener("message", receiveMessage, false);

function receiveMessage( event )
{
  if (event.origin !== "http://example.org:8080")
    return;
  try{
      var data = JSON.parse(event.data);
      if( data.id != undefined && data.src != undefined ){
         document.getElementById(data.id).src = data.src;
      }
  } catch( exception ){ console.log( exception);}

}

如何从另一个html文件中包含图像？

1 个答案: