使用Javascript訪問IFrame的HTML

Question

我正在嘗試訪問IFrame中正在顯示的按鈕。 然后，我想為該按鈕附加一個偵聽器。 但是，我似乎無法訪問IFrame。 假設按鈕的ID為button 。 我該怎么做。

這是我的示例代碼：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <script>
            function test() {
                var temp = $("myIframe").contents();
                alert(temp);
                var temp2 = temp.find("body");
                alert(temp2);
                var temp3 = temp2.html();
                alert(temp3);
            }
        </script>
        <h:form>
            <p:commandButton value="Click" onclick="test();"/>
        </h:form>
        <iframe id="myIframe" src="http://test.com" height="200" width="500"/>
    </h:body>
</html>

temp和temp2的警報起作用，但是temp3未定義。 有人可以幫忙嗎？

Answer 1

出於安全原因，不能做。

想象一下能夠創建一個頁面，該頁面在隱藏的IFRAME中打開Facebook，然后使用腳本竊取身份驗證Cookie或操縱DOM在每個人的牆上張貼垃圾郵件。

出於非常充分的理由，您無法訪問其他網站上的內容。 您將必須實現另一種方式來訪問此其他信息，例如服務器端API。

Answer 2

您無法通過JavaScript訪問iframe內容

那可能是嚴重的安全問題。

您可以實現的唯一方法是將CURL與PHP /其他語言一起使用，並通過服務器呈現它。

ajax（jquery）和php CURL的示例

<script>
var lat = $.ajax({
url: "function.php?function=curl",
async: false
}).responseText;
</script>

然后在function.php中執行CURL，回顯您想要的內容，然后在lat JS Var中得到響應。 因此，如果您這樣做：

<script> alert (lat); </script>

您應該從CURL中看到數據。

在function.php中，您將需要使卷曲看起來像這樣：

if($_GET["function"] == "curl") {
$url = 'http://whichever.url.you.need';
 $curl_handle = curl_init();
  curl_setopt($curl_handle, CURLOPT_URL, $url);
  curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
  curl_setopt($curl_handle, CURLOPT_SSL_VERIFYPEER, FALSE);
  curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl_handle, CURLOPT_COOKIEJAR, $cookie_file_path);
  curl_setopt($curl_handle, CURLOPT_COOKIEFILE, $cookie_file_path);
  //curl_setopt($curl_handle, CURLOPT_POST, 1);
  //curl_setopt($curl_handle, CURLOPT_POSTFIELDS, $post);
  $buffer = curl_exec($curl_handle);
  curl_close($curl_handle);
  // check for success or failure
  if (empty($buffer)) {
  echo 'Something went wrong :(';
  } else {
  echo $buffer;
  }
    }

Answer 3

如果您同時控制父框架和iframe，則可以使用子框架到父框架的消息傳遞來完成。

讓父框架偵聽消息。

<div id="myDiv">
    <iframe src="childFrame.html" id="frame1"></iframe>
</div>

<script>    
window.onmessage = function(e) {
     if(e.data == "click") {
        alert("Button Clicked!");
     }
}
</script>

iframe可以將消息發送到父框架。

<button onclick="parent.postMessage('click', '*');">Hide</button>

使用Javascript訪問IFrame的HTML

問題描述

3 個解決方案

解決方案1
1 已采納 2014-02-21 20:14:41

解決方案2
1 2014-02-21 20:28:34

解決方案3
0 2014-02-21 20:53:38

使用Javascript訪問IFrame的HTML

問題描述

3 個解決方案

解決方案1 1 已采納 2014-02-21 20:14:41

解決方案2 1 2014-02-21 20:28:34

解決方案3 0 2014-02-21 20:53:38

解決方案1
1 已采納 2014-02-21 20:14:41

解決方案2
1 2014-02-21 20:28:34

解決方案3
0 2014-02-21 20:53:38