与DOM交互的AJAX网页？ [英] Interacting with DOM for AJAX webpages?
问题描述
我通过创建虚假页面来实现这一点，我们称之为twitter.html，看起来有点像这样：
< html>
< div class =stream-itemdata-item-type =tweet>
< div class =tweet-image>
< img src =abc.jpgdata-user-id =1234>
< / div>
< / div>
.....
< script src =utility.js>< / script>
< script type =text / javascript>
var tweets = getElementsByClass（tweet）;
for（var i = 0; i< tweets.length; i ++）{
var tweet = tweets [i];
var name = tweet.getAttribute（data-screen-name）;
if（name.toLowerCase（）=='some-username'.toLowerCase（））{
var icon = tweet.getElementsByTagName（img）[0];
icon.style.display ='none';
}
}
< / script>
< / html>
所以隐藏图像不是问题，而是获得系数在正确的时间运行是。
我正在使用Safari扩展构建器允许我提供主页面，以及加载前和加载后的js文件。但是，由于真正的twitter.com使用的AJAX内容，在加载任何推文之前页面加载已完成。
如何让我的js代码运行加载推文后？
你应该听DOMNodeInserted，这叫做...好吧，每次插入DOM节点时:)
收到后，检查节点是否属于您感兴趣的类型，然后从那里继续。
我冒昧地修改你的代码以适应变化。我已经在Chrome中成功测试过了。
window.addEventListener（DOMNodeInserted，
function（event）{
var streamItem = event.target;
if（streamItem == null）
return;
if（streamItem.getAttribute（'class'）！='stream -item'）
return;
var tweet = streamItem.getElementsByClassName（tweet，streamItem）[0];
var name = tweet.getAttribute（data-screen -name）;
if（name.toLowerCase（）=='some-username'.toLowerCase（））
{
var icon = tweet.getElementsByTagName（img）[0 ];
icon.style.display ='none';
}
}，
false）;
hey guys, I'm not experienced with developing extensions, but I'm doing it to learn. I'd like to make an extension that blocks only certain twitter icons. By looking through this tutorial I have figured out a lot. I am able to the tweets from the DOM, check for the username, and disable the display of that image with JavaScript.
I got this far by creating a fake page, let's call it twitter.html, that looks a little like this:
<html>
<div class="stream-item" data-item-type="tweet">
<div class="tweet-image">
<img src="abc.jpg" data-user-id="1234">
</div>
</div>
.....
<script src="utility.js"></script>
<script type="text/javascript">
var tweets = getElementsByClass("tweet");
for (var i = 0; i < tweets.length; i++) {
var tweet = tweets[i];
var name = tweet.getAttribute("data-screen-name");
if (name.toLowerCase() == 'some-username'.toLowerCase()) {
var icon = tweet.getElementsByTagName("img")[0];
icon.style.display='none';
}
}
</script>
</html>
So hiding the images isn't the problem, but getting the coe to run at the right time is. I'm using Safari extension builder allows me to supply a main page, as well as before-load and after-load js files. However, the page load is "finished" before any tweets get loaded due to the AJAX stuff the real twitter.com uses.
How do I get my js code to run after tweets are loaded?
You should listen to the DOMNodeInserted, which is called... well, every time a DOM Node is Inserted :) Once received, check if the node is of a type that interests you, and proceed from there.
I've took the liberty of modifying your code to accommodate the changes. I've successfully tested this in Chrome.
window.addEventListener("DOMNodeInserted",
function(event){
var streamItem = event.target;
if (streamItem == null)
return;
if (streamItem.getAttribute('class') != 'stream-item')
return;
var tweet = streamItem.getElementsByClassName("tweet",streamItem)[0];
var name = tweet.getAttribute("data-screen-name");
if (name.toLowerCase() == 'some-username'.toLowerCase())
{
var icon = tweet.getElementsByTagName("img")[0];
icon.style.display='none';
}
},
false);
这篇关于与DOM交互的AJAX网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
