使用Javascript访问IFrame的HTML
[英]Access HTML of IFrame using Javascript
问题描述
I am trying to access a button that is being displayed in an IFrame. 
我正在尝试访问IFrame中正在显示的按钮。 I then want to attach a listener for that button. 然后，我想为该按钮附加一个侦听器。 However, I cant seem to be able to access the IFrame. 但是，我似乎无法访问IFrame。 Assume the button's id is button . 假设按钮的ID为button 。 How could I go about doing this. 我该怎么做。
Here is the code I have for an example: 这是我的示例代码：
<?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>
Alerts for temp and temp2 work, but temp3 is undefined. temp和temp2的警报起作用，但是temp3未定义。 Can someone help out? 有人可以帮忙吗？
3 个解决方案
解决方案1
1 已采纳 2014-02-21 20:14:41
No can do, for security reasons. 出于安全原因，不能做。
Imagine being able to create a page that opens up Facebook in a hidden IFRAME, then uses script to either steal auth cookies or manipulate the DOM to post spam on everyone's wall. 想象一下能够创建一个页面，该页面在隐藏的IFRAME中打开Facebook，然后使用脚本窃取身份验证Cookie或操纵DOM在每个人的墙上张贴垃圾邮件。
You cannot access content on other web sites for a very good reason. 出于非常充分的理由，您无法访问其他网站上的内容。 You'll have to implement another way to access this other information, such as a server-side API. 您将必须实现另一种方式来访问此其他信息，例如服务器端API。
解决方案2
1 2014-02-21 20:28:34
You cant access the iframe content through javascript 您无法通过JavaScript访问iframe内容
That could be serious security issue. 那可能是严重的安全问题。
The only way you can achieve is using the CURL with PHP/some other language and render it through your server. 您可以实现的唯一方法是将CURL与PHP /其他语言一起使用，并通过服务器呈现它。
sample of ajax(jquery) and php CURL ajax（jquery）和php CURL的示例
<script>
var lat = $.ajax({
url: "function.php?function=curl",
async: false
}).responseText;
</script>
And then inside function.php you do your CURL, echo what you want, and you'll have the response in your lat JS Var. 然后在function.php中执行CURL，回显您想要的内容，然后在lat JS Var中得到响应。 So if you do this: 因此，如果您这样做：
<script> alert (lat); </script>
You should see the data from the CURL. 您应该从CURL中看到数据。
In function.php you'll need your curl to look like this: 在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;
}
}
解决方案3
0 2014-02-21 20:53:38
If you have control over both the parent frame and the iframe, this can be done with child to parent frame messaging. 如果您同时控制父框架和iframe，则可以使用子框架到父框架的消息传递来完成。
Have the parent frame listen for a message. 让父框架侦听消息。
<div id="myDiv">
<iframe src="childFrame.html" id="frame1"></iframe>
</div>
<script>
window.onmessage = function(e) {
if(e.data == "click") {
alert("Button Clicked!");
}
}
</script>
The iframe can send a message to the parent frame. iframe可以将消息发送到父框架。
<button onclick="parent.postMessage('click', '*');">Hide</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.