javascript - 如何从 xml 中提取特定内容（在页面加载时）？

Question

我正在处理html/js代码，如下所示，属于以下url ，其中黑色的所有内容都是从xml中提取的

<div class="container-wrap background--gray-light-2 cf">
    <div class="section container container--mid container--margbot background--white entry-content cf">
        <script src="https://content.jwplatform.com/libraries/FZ8yNTef.js"></script>
        <center>
            <div id="podcast" align="center"></div>
        </center>
        <script>
            var PodcastplayerInstance = jwplayer("podcast");
            PodcastplayerInstance.setup({
                playlist: "//www.cpac.ca/tip-podcast/jwplayer.xml",
                androidhls: true,
                preload: "auto",
                height: 200,
                width: 400,
                visualplaylist: false,
                stretching: "fill",
                "plugins": {
                    "http://www.cpac.ca/tip-podcast/listy.js": {},
                    'viral-2': {'oncomplete': 'False', 'onpause': 'False', 'functions': 'All'}
                }
            });
        </script>
    </div><!-- .entry-content -->
</div><!-- .container-wrap -->

问题陈述：

我想知道我需要在上面添加什么 php/javascript 代码，以便它仅获取2019 年 4月 3 日或2019年4 月 1 日或仅从此处http :// www.cpac.ca/en/episode/

此时，正在从 xml 中提取5 个内容（在黑色矩形框中） 。

使用以下逻辑从 xml 中提取特定内容：

 $context  = stream_context_create(array('http' => array('header' => 'Accept: application/xml')));
 $url = 'http://www.cpac.ca/tip-podcast/jwplayer.xml';

 $xml = file_get_contents($url, false, $context);
 $xml = simplexml_load_string($xml);
 $itemarray = $xml->xpath("/rss/channel/item[1]");

我想知道如何将它与上面的 html/js 代码集成。item 数组的值 (1, 2, 3, 4, 5) 可以根据需要随机排列。

标签： javascriptphpxmlparsingxml-parsing

Answer 1

JavaScript 解决方案

您可以使用 JW PLayer播放列表 APIjwplayer().getPlaylistItem()来检索播放列表中的特定项目。在您的情况下，jwplayer()is PodcastplayerInstance，请注意索引是基于 0 的。因此，您可以在致电后PodcastplayerInstance.setup()添加：

var item = PodcastplayerInstance.getPlaylistItem(0);
console.log( item.title, item.description, item ); // for debugging/testing purposes

您可以使用 jQuery（截至写作时在页面上使用）来更新“垂直矩形框”，它（基于当前标记）位于内部div#podcast_listy_pl_panel：

var $item = jQuery( '#podcast_listy_pl_panel .listy-item' );
$item.find( '.listy-title' ).html( item.title + ' <span class="listy-duration"></span>' );
$item.find( '.listy-description' ).html( item.description );

要获取第二个、第三个等项，只需更改索引：

var item = PodcastplayerInstance.getPlaylistItem(1); // get the second item; index = 1

PHP解决方案

您已经有了获取远程XML 文件内容的代码，因此您可以将其添加到定义的下方$itemarray（即在以下行之后：） $itemarray = $xml->xpath("/rss/channel/item[1]");：

$item = $itemarray ? (array) $itemarray[0] : null;
if ( $item ) :
?>
<div class="listy-textwrapper">
    <span class="listy-title">
        <?php echo $item['title']; ?>
        <span class="listy-duration"></span>
    </span>
    <span class="listy-description">
        <?php echo $item['description']; ?>
    </span>
</div>
<?php
endif; // end $item

要获得第二项，只需item[2]像这样使用：

$itemarray = $xml->xpath("/rss/channel/item[2]"); // get the second item; index = 2, not 1

但是$item这里总是指向$itemarray[0]：

$item = $itemarray ? (array) $itemarray[0] : null;