使用JS通过类或ID从URL数据中获取内容答案

【问题标题】：Get content from URL data by class or ID using JS使用JS通过类或ID从URL数据中获取内容
【发布时间】：2014-11-29 06:59:43
【问题描述】：

我整晚都在考虑解决方案，但我想不通。

我有下载 URL 内容的 PHP 代码：

function get_data($url) {
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}
$data = get_data($url);

我想通过类名或 ID 从 div 或任何内容中获取内容，因此我将这个变量发送给 JS，如下所示：

<script>
    var data = <?php echo json_encode($data); ?>;

    alert(data); 
    //alert shows all code of downloaded URL
    //$( ".content" ).html( data );
    //this line show whole page but I want only specific element/class
</script>

我怎样才能做到这一点？假设我想从 Javascript 中的“data”变量中获取带有 class="productMainTitle" 的 H1 标签的内容？

任何提示将不胜感激！

【问题讨论】：

标签： javascript php jquery css curl

【解决方案1】：

使用 DomParser

var parser = new DomParser();
var doc = parser.parseFromString(data, "text/xml");

然后照常从文档中获取你想要的元素

doc.getElementById("id")

并将其 html 分配给您的 div。

编辑：

$("#content").html(doc.getelementById("col1-755").text());

【讨论】：

感谢您的快速回答。不幸的是，它不起作用。 var data = ;警报（数据）； var parser = new DomParser(); var doc = parser.parseFromString(data, "text/xml"); $('.content').doc.getElementById("col-755").text();在可变数据中，我认为只有下载页面的源代码而不是 xml 代码。
您是否尝试从加载的文档中获取 #col-755 的文本？然后只需使用 doc.getElementById("col-755").text();
是的，但我需要将此值分配给我页面上的 div
非常感谢所有回答！我更喜欢将 Roamer-1888 的答案与 find 一起使用 :)

【解决方案2】：

完全取决于你想做什么。

1.只发送 HTML 客户端的相关片段

查看@artm 的回答。

2。发送所有 HTML 客户端并在那里整理

<script>
    var $data = $("<?php echo $data; ?>");
    $data.find("h1.productMainTitle").appendTo(".content");
</script>

假设 json_encode() 是不必要的。如果我错了，请重新插入。

如果您只想要“h1.productMainTitle”片段，则效率低于 (1)，但如果您想要更多片段，那么这是一种可行的方法。

【讨论】：

这正是我想要的！非常感谢，它完美无缺:) 我猜需要 json_encode 因为没有此代码会再次显示整个页面 ^

【解决方案3】：

使用<iframe> 通过 URL 打开子页面并在必要时隐藏它们。

现在我们可以不使用 URL：创建空框架并强制在其中写入一些 html。

按步骤尝试以下脚本（按下按钮），看看发生了什么：

<body>
  <button onclick="createFrame();">createFrame</button>
  <button onclick="getElement();">getElement</button>
  <button onclick="closeFrame();">closeFrame</button>
  <button onclick="showExtractedElement();">showExtractedElement</button>
  <script>
    var frame
        , frameDoc
        , elem
        , htmlData = '<html><body><h1 class="myClass">Hello</h1></body></html>'
          /*somehow we got this string containing html data*/

    function createFrame()
    {
      frame = document.createElement( "iframe" );
      frame.setAttribute( 'hidden', '' ); // on debug remove this line to see the frame
      document.body.appendChild( frame );
      frame.contentDocument.write(htmlData)
    }

    function getElement( )
    {
      elem = frame.contentDocument.querySelector( '.myClass' )
    }

    function closeFrame()
    {
      document.body.removeChild( frame );
    }

    // the extracted element remains
    function showExtractedElement()
    {
      console.log( elem )
    }

    // call this method from console or script to do all the magic
    function doEverything()
    {
      createFrame()

      getElementFromAnotherPage()

      closeFrame()

      showExtractedElement()
    }
  </script>
</body>

【讨论】：