单击iframe上的HTML元素

时间:2011-12-18 19:22:51

标签: php jquery html iframe xpath

  

可能重复:
  Get xpath location of element in iframe(iframe from my domain)

我有一个javascript函数来获取xpath作为结果(getXPath),下面是代码。此外,我在iframe中有一个外部网站,但是当我使用代理时我会告诉他(代码如下)。我有一个jquery函数,当我点击iframe中的某个元素但不工作时向我展示xpath。什么是问题:

CODE:

<?php 

error_reporting(E_ALL ^ E_NOTICE); 

$url = $_GET['url']; 

if( ! empty($url)) 
{ 
    $data = file_get_contents($url); 

    $data = str_replace('<head>', '<head><base href="'.$url.'" /></base>', $data); 

    $data = preg_replace('#<script(.*?)>(.*?)</script>#is', '', $data); 
    $data = preg_replace('#<iframe(.*?)></iframe>#is', '', $data); 

    $data .=  
    ' 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    $("div").each(function(i){ 
        if($(this).css("position") == "fixed") $(this).css("display", "none"); 
    }); 
    </script> 
    ' 
    ; 

    die($data);  
} 

?> 
<!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" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="author" content="Webarto" /> 

    <title>AdriaMart</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
//function for xpath location
<script type="text/javascript">
    function getXPath(node, path) {
        path = path || [];
        if(node.parentNode) {
          path = getXPath(node.parentNode, path);
        }

        if(node.previousSibling) {
          var count = 1;
          var sibling = node.previousSibling
          do {
            if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {count++;}
            sibling = sibling.previousSibling;
          } while(sibling);
          if(count == 1) {count = null;}
        } else if(node.nextSibling) {
          var sibling = node.nextSibling;
          do {
            if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {
              var count = 1;
              sibling = null;
            } else {
              var count = null;
              sibling = sibling.previousSibling;
            }
          } while(sibling);
        }

        if(node.nodeType == 1) {
          path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count > 0 ? "["+count+"]" : ''));
        }
        return path;
      };

</script>

//function to get  xpath location and write in textfield in focus
***<script>

    $('#iframe').ready(function () {
        var selectedtextbox;
$('input[name="myinput"]').focus(function(){selectedtextbox=$(this);});
        $('div, p, li, a, href').click(function () { 
           var xpath = getXPath(this);
            selectedtextbox.val(xpath)
        });
    });
</script>***
<style type="text/css"> 
<!-- 
iframe{width:100%;height:400px;} 
--> 
</style> 

</head> 
<body> 

<!-- ... -->
<input id="iframe_url" name="" type="text" />
<input id="iframe_button" name="" type="button" />
<iframe id="iframe" src="?url=http://kupime.com"></iframe>
<script type="text/javascript">
  document.getElementById('iframe_button').onclick = function () {
    document.getElementById('iframe').src = '?url=' + document.getElementById('iframe_url').value;
  };
</script>
<!-- ... -->
//Textfields for xpath location to write inside them
<input id="" name="myinput" type="text" value="">
<input id="" name="myinput" type="text" value="">
<input id="" name="myinput" type="text" value="">



</body> 
</html> 

***

    $('#iframe').ready(function () {
        var selectedtextbox;
$('input[name="myinput"]').focus(function(){selectedtextbox=$(this);});
        $('div, p, li, a, href').click(function () { 
           var xpath = getXPath(this);
            selectedtextbox.val(xpath)
        });
    });
</script>***

1 个答案:

答案 0 :(得分:1)

有3个问题。

  1. 此时无法访问iframe元素(该函数位于iframe上方,#iframe元素仍然未知)
  2. ready将在当前文档准备就绪时触发,而不是iframe中的文档。请改用

  3. 您需要将iframe中的文档设置为context-argument


  4. //wait for ready in the current document to have access to #iframe
    $(function()
      {
        $('#iframe')
          //observe the load-event of the iframe-element
          .on('load',
              function () 
              {
                //set a default-input to avoid errors
                var selectedtextbox=$('input[name="myinput"]:eq(0)');
                $('input[name="myinput"]')
                  .focus(function(){selectedtextbox=$(this);});
                //Note the 2nd argument here, 
                //it sets the contextof $() to the document inside the iframe
                $('div, p, li, a, href',
                  this.contentWindow.document)
                    .click(function () 
                           { 
                              var xpath = getXPath(this);
                              selectedtextbox.val(xpath)
                           });
                });
        });