जावास्क्रिप्ट निष्पादन मूल बातें और क्यूटी कार्यक्रमों के अंदर साइटों के साथ बातचीत

परिचय

शायद, कई लोगों ने क्रॉस-प्लेटफॉर्म क्यूटी लाइब्रेरी के बारे में सुना है। WebKit वेब पेज रेंडरिंग इंजन सभी अधिक है। इतना समय पहले नहीं, पहले में दूसरे पर एक आवरण शामिल था, 50 लाइनों में ब्राउज़र बनाने के उदाहरणों को खोजना मुश्किल नहीं है। फिर भी, क्यूटी कोड से किसी वेब पेज के व्यक्तिगत तत्वों को एक्सेस करने के तरीके के बारे में बहुत कुछ नहीं लिखा गया है।



इस विवरण में, मैं मानता हूं कि लोगों को PyQt (मैंने समरफ़ील्ड सिखाया), और जावास्क्रिप्ट के एक अस्पष्ट विचार का बुनियादी ज्ञान है। मैं अपने स्तर को वैसा ही चित्रित करता हूं, इसलिए मैं त्रुटियों के लिए अग्रिम रूप से माफी चाहता हूं, खासकर जावा स्क्रिप्ट के वर्णन में। इस तथ्य के बावजूद कि पायथन का उपयोग भाषा के रूप में किया जाता है, C ++ / Qt प्रोग्रामर के पास भी कोई प्रश्न नहीं होना चाहिए।

परीक्षण मामलों को जीएनयू / लिनक्स के तहत PyQt-4.7.3, संस्करण Python-2.6.6-r1 पर चलाया गया था। कार्यक्रमों से आपको जेएस (क्रोम, उदाहरण के लिए) डीबगिंग और आपके विवेक पर PyQt IDE के साथ एक ब्राउज़र की आवश्यकता होगी, मैं एरिक 4 का उपयोग करता हूं।

उदाहरण 1. वह ब्राउज़र जिसे हम मॉक करेंगे

# -*- coding: utf-8 -*-

from PyQt4.QtCore import *

from PyQt4.QtNetwork import *

from PyQt4.QtGui import *

from PyQt4.QtWebKit import *



class BaseBrowser(QWidget):

def __init__(self, parent = None):

super(BaseBrowser, self).__init__(parent)

self.__progress = 0

QNetworkProxyFactory.setUseSystemConfiguration(True)

self.webView = QWebView()

self.webView.load(QUrl( "http://www.yandex.ru" ))

self.connect(self.webView, SIGNAL( "loadFinished(bool)" ), self.adjustLocation)

self.connect(self.webView, SIGNAL( "titleChanged(QString)" ), self.adjustTitle)

self.connect(self.webView, SIGNAL( "loadProgress(int)" ), self.setProgress)

self.connect(self.webView, SIGNAL( "loadFinished(bool)" ), self.finishLoading)

self.locationEdit = QLineEdit()

self.locationEdit.setSizePolicy(QSizePolicy.Expanding, self.locationEdit.sizePolicy().verticalPolicy())

self.connect(self.locationEdit, SIGNAL( "returnPressed()" ), self.changeLocation)

self.goButton = QPushButton( "Go" )

self.connect(self.goButton, SIGNAL( "clicked()" ), self.changeLocation)

self.layout = QGridLayout(self)

self.layout.addWidget(self.locationEdit, 0, 0)

self.layout.addWidget(self.goButton, 0, 1)

self.layout.addWidget(self.webView, 1, 0, 1, 2)

self.setLayout(self.layout)



def adjustLocation(self):

self.locationEdit.setText(self.webView.url().toString())



def changeLocation(self):

url = self.locationEdit.text()

if url[0:7] != 'http://' :

url = 'http://' + url

self.webView.load(QUrl(url))

self.webView.setFocus()



def adjustTitle(self):

if self.__progress <= 0 or self.__progress >= 100:

self.setWindowTitle(self.webView.title())

else :

self.setWindowTitle(QString( "%1 (%2%)" ).arg(self.webView.title()).arg(self.__progress))



def setProgress(self, p):

self.__progress = p

self.adjustTitle()



def finishLoading(self):

self.__progress = 100

self.adjustTitle()



if __name__ == "__main__" :

import sys

app = QApplication(sys.argv)

prog = BaseBrowser()

prog.show()

sys.exit(app.exec_())



* This source code was highlighted with Source Code Highlighter .

उदाहरण कोड 1: pastebin.com/GVQ4dw1M



ब्राउज़र C ++ / Qt और PyQt पर प्रशिक्षण उदाहरणों से ब्राउज़रों के विषय पर कुछ भिन्नता प्रस्तुत करता है, अगले दो उदाहरणों में हम इसे विरासत में लेंगे। मैं समझता हूं कि इस तरह के कार्यक्रम, यहां तक ​​कि छोटे भी, लिखते नहीं हैं, और कार्यक्रम को एक वर्ग नहीं होना चाहिए, लेकिन मैं कोड की संख्या, इसकी दृश्यता और सही वास्तुकला के बीच संतुलन का पालन कर सकता हूं जैसा कि मैं कर सकता हूं।

इसलिए, हमारा ब्राउज़र बहुत कुछ नहीं जानता है, लेकिन दर्ज किए गए पृष्ठ को लोड और प्रदर्शित कर सकता है, इसके लिए हम QWebView विजेट का उपयोग करते हैं, हमने इस विजेट से उत्पन्न मानक संकेतों को हमारे ब्राउज़र के स्लॉट से जोड़ा है, जो प्रोग्राम को वर्तमान SIGNAL वेब पेज का शीर्षक बदलने के बारे में जानने की अनुमति देता है ("titleChanged) (QString) "), लोडिंग SIGNAL की प्रगति (" लोडप्रोग्रेस (int) ") और लोडिंग का अंत - SIGNAL (" लोडफिनिश्ड (बूल) ")। इसके अलावा, इस वेब पेज पर जाने के लिए पेज एड्रेस और एक बटन दर्ज करने के लिए एक QlineEdit फ़ील्ड बनाई जाती है, या तो "एंटर" दबाकर या बटन पर क्लिक करके।

हम ब्राउज़र लॉन्च करते हैं, हम काम करने की कोशिश करते हैं, हम "नग्न" वेबकीट के काम की गति से भयानक हैं। अभी तक हमने कुछ खास नहीं लिखा है। हमारा ब्राउज़र सभी के लिए लिंक का अनुसरण नहीं करता है।

उदाहरण 2. DOM पेड़ और Qt से उनके तत्वों तक पहुंच

सामान्य तौर पर, HTML पृष्ठों की संरचना के बारे में अलग से पढ़ना बेहतर होगा, दो वाक्यों में यह वर्णन करने के लिए समस्याग्रस्त है। सामान्य तौर पर, यदि आप किसी प्रकार के वेब इंटरफ़ेस में एक ऑफ़लाइन शेल बनाते हैं, तो भी आपको जावा स्क्रिप्ट सीखने की आवश्यकता होगी, कम से कम इसका वह हिस्सा जो डेटा एक्सेस से संबंधित है। तो, कोई भी आधुनिक ब्राउज़र आपको एक वेब पेज की सामग्री को नोड्स के पेड़ के रूप में प्रस्तुत करने की अनुमति देता है, जिनमें से प्रत्येक नोड एक तत्व, विशेषता, पाठ, ग्राफिक या किसी अन्य वस्तु है। नोड्स अभिभावक-बाल संबंधों द्वारा परस्पर जुड़े होते हैं (हां, यह लाइन विकिपीडिया से है)। जावास्क्रिप्ट दुभाषिया का उपयोग करते हुए, इस पेड़ के नोड्स तक पहुँचा जा सकता है। आइए अपना ब्राउज़र खोलें और एक ही yandex.ru पर जाएं (मुझे आशा है कि वे एक हेबरफ़ेक्ट के साथ कवर नहीं किए जाएंगे)। आप सर्च बार के ऊपर कितने लिंक देखते हैं?

लिंक की सूची पर क्लिक करें और उन्हें डेवलपर के मेनू में खोलें (क्रोम में, यह संदर्भ सूची में एक "चेक आइटम" है)। इसलिए हम पेड़ में वर्तमान तत्व की स्थिति देखेंगे। सूची में एक सीधा आईडी = "टैब" है और एक तालिका है। जावास्क्रिप्ट कंसोल पर जाएं और इस तालिका को चुनने का प्रयास करें:

document.getElementById("tabs").





देखिए इसमें कितनी लाइनें हैं:

document.getElementById("tabs").rows.length





और कितने कॉलम:

document.getElementById("tabs").rows(0).cells.length.





अब हमें अपने ब्राउज़र में वही परिणाम मिलते हैं।

# -*- coding: utf-8 -*-

from basebrowser import *



class SimpleJavaScript(BaseBrowser):

def __init__(self, parent = None):

super(SimpleJavaScript, self).__init__(parent)

self.jsButton = QPushButton( "ExecuteJS" )

self.connect(self.jsButton, SIGNAL( "clicked()" ), self.jsScript)

self.jsStringEdit = QLineEdit()

self.jsStringEdit.setSizePolicy(QSizePolicy.Expanding, self.jsStringEdit.sizePolicy().verticalPolicy())

self.jsStringEdit.setText( "document.getElementById(\"tabs\").rows(0).cells.length" )

self.connect(self.jsStringEdit, SIGNAL( "returnPressed()" ), self.jsScript)

self.jsReturnText = QTextEdit()

self.layout.addWidget(self.jsStringEdit, 2, 0, 1, 1)

self.layout.addWidget(self.jsButton, 2, 1, 1, 1)

self.layout.addWidget(self.jsReturnText, 3, 0, 1, 2)



def jsScript(self):

jsString = self.jsStringEdit.text()

jsReturn = self.webView.page().currentFrame().evaluateJavaScript(jsString)

self.jsReturnText.setPlainText(jsReturn.toString())



if __name__ == "__main__" :

import sys

app = QApplication(sys.argv)

ui = SimpleJavaScript()

ui.show()

sys.exit(app.exec_())



* This source code was highlighted with Source Code Highlighter .

उदाहरण कोड 2: pastebin.com/p4P1ZEtS

तो, JS कोड की गणना फंक्शन webView.page () में की जाती है। CurrentFrame ()। EvJJavaScript (jsString) का मूल्यांकन करें।

मूल्यांकनJavaScript (स्ट्रिंग) फ़ंक्शन केवल तर्क के रूप में जावास्क्रिप्ट कोड युक्त QString स्ट्रिंग लेता है। इस कोड को वर्तमान पृष्ठ पर निष्पादित किया जाएगा और परिणाम एक QVariant चर के रूप में वापस आ जाएगा। उसी समय, दुर्भाग्य से, आप परिणामस्वरूप डोम तत्वों का एक उपप्रकार प्राप्त करने में सफल नहीं होंगे, लेकिन कोई भी पाठ या संख्यात्मक जानकारी - कृपया।

उदाहरण 3. ऑफ़लाइन नियंत्रण बनाना

इस बार होम पेज का पता इस तरह चुना गया क्योंकि मेरे पास एक एटीआई कार्ड है और मैं लिनक्स के नीचे बैठा हूं, जो जानता है, वह समझ जाएगा कि यह बहुत प्यार से बाहर नहीं है। वास्तव में, चयन जैसे पृष्ठ पर बहुत सारे नियंत्रण हैं, जिनमें से एक के लिए हम एक समकक्ष बनाएंगे।

# -*- coding: utf-8 -*-

from basebrowser import *

from PyQt4.QtGui import *

from PyQt4.QtCore import *



class JSSelectList(QAbstractListModel):

def __init__ (self, _id, _jsFunc, parent = None):

super(JSSelectList, self).__init__(parent)

self.id = _id

self.jsFunc = _jsFunc



def data(self, index, role=Qt.DisplayRole):

if not index.isValid():

return QVariant()

if role == Qt.DisplayRole:

jsstring = QString( "document.getElementById('%1').options[%2].textContent" ).arg(self.id).arg(index.row())

jsreturn = self.jsFunc(jsstring)

return jsreturn.toString().trimmed()



def rowCount(self, index=QModelIndex()):

jsstring = QString( "document.getElementById('%1').length" ).arg(self.id)

jsreturn = self.jsFunc(jsstring)

ok = False

count, ok = jsreturn.toInt()

return count if ok else 0



def headerData(self, section, orientation, role=Qt.DisplayRole):

if role != Qt.DisplayRole:

return QVariant()

else :

return self.id



class JSComboBoxDemo(BaseBrowser):

def __init__(self, parent = None):

super(JSComboBoxDemo, self).__init__(parent)

self.vendorComboBox = QComboBox()

id = QString( "productLine" )

self.vendorListModel = JSSelectList(id, self.webView.page().currentFrame().evaluateJavaScript)

self.vendorComboBox.setModel(self.vendorListModel)

self.connect(self.vendorComboBox, SIGNAL( "currentIndexChanged(int)" ), self.setSelectOnWebPage);

self.connect(self.webView, SIGNAL( "loadFinished(bool)" ), self.initComboBox)

self.layout.addWidget(self.vendorComboBox, 2, 0, 1, 1)

self.webView.load(QUrl( "http://www.amd.com" ))



def setSelectOnWebPage(self, new_id):

jsstring = QString( "document.getElementById('productLine').selectedIndex=%1" ).arg(new_id)

self.webView.page().currentFrame().evaluateJavaScript(jsstring)



def initComboBox(self):

self.vendorComboBox.setCurrentIndex(0)



if __name__ == "__main__" :

import sys

app = QApplication(sys.argv)

ui = JSComboBoxDemo()

ui.show()

sys.exit(app.exec_())



* This source code was highlighted with Source Code Highlighter .

उदाहरण कोड 3: pastebin.com/YzA9hL3H



एक तालिका, सूची, ड्रॉपडाउन के रूप में ऐसे GUI तत्वों का निर्माण करते समय (मैं सही तरीके से अनुवाद करना नहीं जानता) Qt एक सुविधाजनक MVC दृष्टिकोण का उपयोग करने की अनुमति देता है। आपको केवल अपने डेटा मॉडल तक पहुंच का वर्णन करने की आवश्यकता है - आपको केवल अपने डेटा प्रतिनिधित्व को अंतर्निहित अमूर्त वर्ग से प्राप्त करना होगा और इसे मानक नियंत्रण से जोड़ना होगा (समरफील्ड में, यह अध्याय 14 लगता है)। इस मामले में, QAbstractListModel का उपयोग किया जाता है, मापदंडों से केवल JS निष्पादन फ़ंक्शन और पृष्ठ पर चयनित नाम इसे पास किया जाता है। सभी पुनर्निर्धारण मानकों।



उदाहरण में, दो सिग्नल-स्लॉट कनेक्शनों को छोड़कर, सब कुछ काफी स्पष्ट है, जिस पर मैं आपका ध्यान आकर्षित करना चाहूंगा।



सबसे पहले, पृष्ठ लोड होने से पहले जावास्क्रिप्ट को निष्पादित करने की कोशिश करना बेकार है, इसलिए इस तथ्य का लाभ उठाएं कि जब डाउनलोड पूरा हो जाए, तो QWebView विजेट एक संकेत ("लोडफिनिश्ड (बूल)") उत्पन्न करता है, जिसका मैंने पहले उदाहरण में उल्लेख किया है।



self.connect(self.webView, SIGNAL("loadFinished(bool)"), self.initComboBox)







अन्यथा, यदि आप लाइन को धक्का देते हैं



self.vendorComboBox.setCurrentIndex(0)







__init__ में पहले मूल्य के साथ कोई इनिशियलाइज़ेशन नहीं होगा - मूल्यांकनजवास्क्रिप्ट कुछ भी वापस नहीं करेगा, क्योंकि पेज अभी तक लोड करने में कामयाब नहीं हुआ है।

दूसरे, हमें दोनों दिशाओं में सिंक्रनाइज़ेशन की आवश्यकता है:



self.connect(self.vendorComboBox, SIGNAL("currentIndexChanged(int)"), self.setSelectOnWebPage)







इसी तरह, आप पृष्ठ की लगभग सभी जानकारी को सिंक्रनाइज़ कर सकते हैं, बटन पर क्लिक कर सकते हैं, जानकारी डाउनलोड कर सकते हैं।



मुझे खुशी होगी अगर जानकारी किसी के लिए उपयोगी है। सभी को मेरी क्रिसमस और नया साल मुबारक।



प्रयुक्त साहित्य:



जे। ब्लैंचेट, एम। समरफ़ील्ड। Qt 4: C ++ GUI प्रोग्रामिंग।

समरफील्ड को चिह्नित करें। पायथन और क्यूटी के साथ रैपिड जीयूआई प्रोग्रामिंग।

अन्य स्रोत:

Arora इंटरनेट ब्राउज़र का स्रोत कोड, जावास्क्रिप्ट और PyQt का उपयोग करके विभिन्न इंटरनेट साइटें।