1
Firefox OS 앱을 만들었습니다. 제목을 클릭하면 웹 콘텐츠가로드되고 수정되며 div.innerHtml을 사용하여 표시됩니다. 이 작동합니다.Firefox OS 앱의 동적 콘텐츠
동적 콘텐츠에는 몇 가지 다른 단락 <p>XXX</p>이 포함됩니다. 모든 단락에는 고유 한 ID "text0", "text1"등이 있습니다.
사용자가 단락을 클릭하면 JavaScript 함수를 호출해야합니다.
나는 다양한 웹 사이트를 검색하고 동적 콘텐츠에 onclick-Eventhandler를 추가하는 여러 가지 방법을 시도했지만 이들 중 아무 것도 작동하지 않는 것 같습니다.
내 코드를 살펴볼 수 있습니까?
여기에 content.js 추출 항목에 "==== >>>>"라는 이벤트 처리기를 추가하려는 위치를 표시했습니다.
index.html을 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style/icons.css"/>
<link rel="stylesheet" type="text/css" href="style/principal.css"/>
<link rel="stylesheet" type="text/css" href="style/header.css"/>
<link rel="stylesheet" type="text/css" href="style/toolbar.css"/>
<link rel="stylesheet" type="text/css" href="style/sidebar.css"/>
<link rel="stylesheet" type="text/css" href="style/menuaction.css"/>
<link rel="stylesheet" type="text/css" href="style/menulist.css"/>
<link rel="stylesheet" type="text/css" href="style/pagebody.css"/>
<title>FxOS Stub</title>
</head>
<body>
XXX
<div id="page0" class="pagebody" aria-owns="tb0" aria-expanded="true">
<!-- Junkyard, only for the sake of the example - NOT for real use -->
<div id="mainpage" style="margin:0.5rem 1rem 0.5rem 1rem">
<h2>FxOsStub revisited.</h2>
<p>This is the first page body (aka page 0, usually your splash screen.)
<br/>Activate the others by pressing the toolbar's items.</p>
</div>
<!-- End of Junkyard - - - - - - - - - - - - - - - - - - - - - - - -->
</div>
XXX
<footer><button>Cancel</button></footer>
</section>
<script type="text/javascript" src="js/temporary.js"></script>
<script type="text/javascript" src="js/dispatcher.js"></script>
<script type="text/javascript" src="js/install.js"></script>
<script type="text/javascript" src="js/toolbar.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/menuaction.js"></script>
<script type="text/javascript" src="js/menulist.js"></script>
<script type="text/javascript" src="js/pagebody.js"></script>
<script type="text/javascript" src="js/content.js"></script>
</body>
</html>
content.js : 문단은 동적으로 생성 말하는 그 이후
var id_link;//
window.addEventListener(
"load",
function() {
document.getElementById('headline').onclick=LoadContent;
//document.getElementById('mainpage').onclick=CallPage;
id_link = new Object();
}
);
function CallPage() {
var display = document.getElementById('mainpage');
display.innerHTML = "";
}
function LoadContent() {
// Cross domain XHR
var display = document.getElementById('mainpage');
var xhr = new XMLHttpRequest({mozSystem: true});
xhr.mozSystem = true;
xhr.onreadystatechange = function() {
if (xhr.status === 200 && xhr.readyState === 4)
{
//crossDomainXHRDisplay.innerHTML = "<h4>Result from Cross-domain XHR</h4>" + xhr.response;
//crossDomainXHRDisplay.style.display = "block";
var iEnd = 0;
var text = xhr.response;
var output = "";
// Clear all Returns
text = text.replace(/\n/g, "");
text = text.replace(/\r/g, "");
//text = text.replace(/<img.*\/>/g, "image");
// Set HTML header
output = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n";
output = output + "\"http://www.w3.org/TR/html4/loose.dtd\">";
output = output + "<html>\n";
output = output + "<head>\n";
output = output + "<title>Spiegel online</title>";
output = output + "</head>\n";
output = output + "<body>\n";
var cnt_it = 0;
var text_upper = text;
// Search for headlines
while(iEnd == 0)
{
var match = text.match(/\<h2\sclass\=\"article\-title\">(.+?)<\/h2>(.*)/);
if(match != null)
{
if (match.length > 0)
{
var titel=match[1];
var link_src = titel.match(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/);
id_link[cnt_it]=link_src[1];
titel = titel.replace(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/,"<h2>$2</h2>");
output = output + "<p id=\"text"+cnt_it+"\">" + titel;//match[1];
cnt_it++;
text = match[2];
// Search for article intro
var match_intro = text.match(/(.+?)\<h2\sclass\=\"article\-title\">/);
if(match_intro != null)
{
if (match_intro.length > 0)
{
var search_intro = match_intro[1];
var intro = search_intro.match(/<p\sclass\=\"article\-intro clearfix\">(.+?)<\/p.*/);
if(intro != null)
{
if (intro.length > 0)
{
output = output + intro[1];
}
}
}
}
output = output + "</p>\n";
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
iEnd = 0;
var text_test = xhr.response;
text_test = text_test.match(/.+?<div\sclass=\"auto-width\snav-channel-sub\">(.*)/);
var text_lower = xhr.response;//text_test[0];
text_lower = text_lower.replace(/\n/g, "");
text_lower = text_lower.replace(/\r/g, "");
text_lower = text_lower.replace(/<img.+?>/g, "");
while(iEnd == 0)
{
var text_lower = text_lower.match(/<ul\sclass\=\"article\-list\">(.+?)<\/ul>(.*)/);
if(text_lower != null)
{
if (text_lower.length > 0)
{
var title = text_lower[1];
var link_src = title.match(/<a href=\"(.+?)\" .*<\/a>/);
if (link_src != null)
{
id_link[cnt_it]=link_src[1];
title = title.replace(/<a href=\"(.+?)\" title=\"(.+?)\".*>.*<\/a>/, "$2");//" - "+id_link[cnt_it]);
//output = output + "<p id=\"text"+cnt_it+"\"><ul class=\"article-list\">" + text_lower[1] + "</ul></p>\n";
output = output + "<p onClick=\"CallPage()\" id=\"text"+cnt_it+"\">" + title + "</p>\n";
cnt_it++;
}
text_lower = text_lower[2];
iEnd = 1;
}
else
{
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
output = output + "</body>\n";
output = output.replace(/\n/g, "");
output = output.replace(/\r/g, "");
====>>> How to add a WORKING event handler to the different paragraphs, which have the id text0, text1 and so on...
display.insertAdjacentHTML('afterbegin', output);
//display.innerHTML = output;
display.style.display = "block";
//var ObjectUse=display.getElementById("text0");
//ObjectUse.addEventListener("click", function (event) { alert('Hallo'); CallPage(); }, false);
//ObjectUse.onclick="alert('Hallo')";//document.CallPage;**
//var cnt_again = 0;
//for(cnt_again=0; cnt_again<cnt_it; cnt_again++)
//{
// document.getElementById('text'+cnt_again).onclick=CallPage;
// }
//jQuery('.clickable').bind('click', CallPage);
}
};
xhr.onerror = function() {
display.innerHTML = "<h4>Result from Cross-domain XHR</h4><p>Cross-domain XHR failed</p>";
display.style.display = "block";
};
xhr.open("GET", "http://www.spiegel.de", true);
xhr.send();
}