如何在另一個HTML文件的框架中包含圖像？

Question

我目前有問題，包括來自另一個文件的框架圖像，我正在做的是創建一個具有兩個框架的html頁面，其代碼如下：

<html>

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

</frameset>

</html>

然后，在aa.html中有三個鏈接，並且在單擊第一個鏈接時，圖像應以id =“ 2”的框架打開。

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方法。

使用window.postMessage進行的UPDATE如下所示：

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 個解決方案

解決方案1
0 2015-04-05 14:11:34

如何在另一個HTML文件的框架中包含圖像？

問題描述

1 個解決方案

解決方案1 0 2015-04-05 14:11:34

解決方案1
0 2015-04-05 14:11:34