使用 Javascript 访问 IFrame 的 HTML答案

【问题标题】：Access HTML of IFrame using Javascript使用 Javascript 访问 IFrame 的 HTML
【发布时间】：2014-03-23 13:06:21
【问题描述】：

我正在尝试访问正在 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 未定义。有人可以帮忙吗？

【问题讨论】：

IFRAME 中的页面是否位于不同的站点上？
是的。它可以是任何网站。我希望能够根据需要向按钮添加侦听器。
您无法访问其他域的 IFRAME
有没有办法在没有 IFrame 的情况下完成我想要的？也许使用标签？
您可以使用 jQuery 检索 html，然后将其插入到您的 dom 中。（Embed 和 iframe 一样有跨域限制）

标签： javascript jquery html jsf iframe

【解决方案1】：

出于安全原因，不能这样做。

想象一下，可以创建一个页面，在隐藏的 IFRAME 中打开 Facebook，然后使用脚本窃取身份验证 cookie 或操纵 DOM 在每个人的墙上发布垃圾邮件。

您出于非常充分的理由无法访问其他网站上的内容。您必须实现另一种方式来访问这些其他信息，例如服务器端 API。

【讨论】：

【解决方案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 中，你需要你的 curl 看起来像这样：

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;
  }
    }

【讨论】：

这很有趣。我要去看看这个
我知道有这个库。让我帮你找

【解决方案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>

【讨论】：