Access HTML of IFrame using Javascript
Question
I am trying to access a button that is being displayed in an IFrame. I then want to attach a listener for that button. However, I cant seem to be able to access the IFrame. Assume the button's id is 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. Can someone help out?
3 answers
solution1
1 ACCPTED 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.
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.
solution2
1 2014-02-21 20:28:34
You cant access the iframe content through javascript
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.
sample of ajax(jquery) and 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. So if you do this:
<script> alert (lat); </script>
You should see the data from the CURL.
In function.php you'll need your curl to look like this:
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;
}
}
solution3
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.
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.
<button onclick="parent.postMessage('click', '*');">Hide</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.