Qt简易分页式浏览器框架开发（课设作业，附源码，报告，安装包）

目录

 大一软工，C++的Qt课设成果：

这是应用的主页面：（链接默认设置的Bing的主页）

 浏览器工具栏介绍：

View：

     效果展示：   ​编辑

     源码展示：

 Effect：

         效果展示：

           效果展示：

             ​编辑

Tools：

Gift：

       pop Window ：

BookMark：

 操作栏：

项目打包：

总  结：

---

app图标
 

 大一软工，C++的Qt课设成果：

基于MSVC的编译器，应用QWebenginewidget，当时配置MSVC还是搞了一天没搞明白花的钱从淘宝上找的人，发现是VS版本只支持2017，版本兼容性真是一个大问题！

这是应用的主页面：（链接默认设置的Bing的主页）

该模块负责显示和浏览用户输入的网页内容。具体设计如下：

模块功能：

• 提供用户界面，显示网页的内容。
• 允许用户在界面中浏览网页，包括滚动和缩放功能。
• 支持网页导航，包括前进和后退功能。

设计说明：

• 浏览网页模块可以使用一个 WebView 控件实现，用于显示网页内容。
• 用户可以使用滚动条进行页面的上下滚动，以查看完整的页面内容。
• 提供缩放功能，允许用户调整页面的大小比例。
• 通过前进和后退按钮，用户可以导航到浏览历史记录中的前一个或后一个页面。

以下是main.cpp的部分代码：

QUrl url;
    if (argc > 1)
        url = QUrl::fromUserInput(argv[1]);
    else
        url = QUrl("https://cn.bing.com/?scope=web&FORM=HDRSC1&mkt=zh-CN");
    //这段代码用于解析命令行参数或设置默认的网页链接。如果命令行参数数量大于 1，那么将使用第
    //一个命令行参数作为初始的网页链接，否则默认使用 "https://cn.bing.com/?scope=web&FORM=HDRSC1&mkt=zh-CN"。

    MainWindow *browser = new MainWindow(url);//创建了一个 MainWindow 对象 browser，并传入初始的网页链接。
    browser->resize(1536, 864);
    browser->show();
    //设置 browser 窗口的大小，并显示出来。

以下是MainWindow的构造函数的部分源码：

 setAttribute(Qt::WA_DeleteOnClose, true);
    progress = 0;

    QFile file(":/jquery.min.js");
    if (file.open(QIODevice::ReadOnly)) {
        jQuery = file.readAll();
        jQuery.append("\nvar qt = { 'jQuery': jQuery.noConflict(true) };");
        file.close();

        view = new QWebEngineView(this);
        view->load(url);
        connect(view, &QWebEngineView::loadFinished, this, &MainWindow::adjustLocation);
        connect(view, &QWebEngineView::titleChanged, this, &MainWindow::adjustTitle);
        connect(view, &QWebEngineView::loadProgress, this, &MainWindow::setProgress);
        connect(view, &QWebEngineView::loadFinished, this, &MainWindow::finishLoading);

        locationEdit = new QLineEdit(this);
        locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());
        connect(locationEdit, &QLineEdit::returnPressed, this, &MainWindow::changeLocation);

        QToolBar *toolBar = addToolBar(tr("Navigation"));
        toolBar->addAction(view->pageAction(QWebEnginePage::Back));
        toolBar->addAction(view->pageAction(QWebEnginePage::Forward));
        toolBar->addAction(view->pageAction(QWebEnginePage::Reload));
        toolBar->addAction(view->pageAction(QWebEnginePage::Stop));
        toolBar->addWidget(locationEdit);

        QMenu *viewMenu = menuBar()->addMenu(tr("&View"));
        QAction *viewSourceAction = new QAction(tr("Page Source"), this);
        connect(viewSourceAction, &QAction::triggered, this, &MainWindow::viewSource);
        viewMenu->addAction(viewSourceAction);

        QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));
        effectMenu->addAction(tr("Highlight all links"), this, &MainWindow::highlightAllLinks);

        rotateAction = new QAction(this);
        rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));
        rotateAction->setCheckable(true);
        rotateAction->setText(tr("Turn images upside down"));
        connect(rotateAction, &QAction::toggled, this, &MainWindow::rotateImages);
        effectMenu->addAction(rotateAction);

        QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));
        toolsMenu->addAction(tr("Remove GIF images"), this, &MainWindow::removeGifImages);
        toolsMenu->addAction(tr("Remove all inline frames"), this, &MainWindow::removeInlineFrames);
        toolsMenu->addAction(tr("Remove all object elements"), this, &MainWindow::removeObjectElements);
        toolsMenu->addAction(tr("Remove all embedded elements"), this, &MainWindow::removeEmbeddedElements);

        QMenu *giftMenu = menuBar()->addMenu(tr("Gift"));
        QAction *giftAction = new QAction(tr("Pop Window"), this);
        QAction *dialogueAction = new QAction(tr("Create New Page"), this);
        giftMenu->addAction(giftAction);
        giftMenu->addAction(dialogueAction);
        connect(giftAction, &QAction::triggered, this, &MainWindow::giftPOP);
        connect(dialogueAction, &QAction::triggered, this, &MainWindow::createWindow);

        QMenu *bookmarkMenu = menuBar()->addMenu(tr("Bookmark"));
        QAction *addMarkAction = new QAction(tr("Add Mark"), this);
        bookmarkMenu->addAction(addMarkAction);
        connect(addMarkAction, &QAction::triggered, this, &MainWindow::addMarkWindowx);

        setCentralWidget(view);
    }

 浏览器工具栏介绍：

可以看到工具栏第一行，有五个toolBar，分别是view，effect，tools，gift和bookmark。这五个空间对应五个不同的功能，接下来我会为大家介绍五个功能：

View：

         

该功能模块允许用户查看当前加载的网页的源代码。具体设计如下：

模块功能：

• 允许用户查看当前加载的网页的源代码。

设计说明：

• 创建一个按钮或菜单项，用于触发查看网页源代码的操作。
• 在点击按钮或菜单项时，获取当前加载的网页的源代码。
• 显示源代码的文本内容，可以使用一个文本编辑器或类似的控件来展示源代码。
• 提供适当的界面布局，以便用户可以方便地查看和浏览源代码。

     效果展示：   

     源码展示：

QTextEdit *textEdit = new QTextEdit(nullptr);
    //在该函数中，首先创建了一个QTextEdit对象textEdit，用于显示网页的源代码。

    textEdit->setAttribute(Qt::WA_DeleteOnClose);
    //设置textEdit的属性为Qt::WA_DeleteOnClose，表示在关闭窗口时删除textEdit对象。

    textEdit->adjustSize();
    //调整textEdit的大小以适应内容。

    //根据主窗口的位置和textEdit的尺寸，将textEdit移动到主窗口中心的位置。
    textEdit->setAlignment(Qt::AlignHCenter);

    textEdit->resize(1200,800);
    textEdit->show();
    //显示textEdit窗口。

    view->page()->toHtml([textEdit](const QString &html){
        textEdit->setPlainText(html);
    });
    //通过调用view对象的page()方法获取当前页面的QWebEnginePage对象，并调用该对象的toHtml()方法来获取页面的HTML源代码。
    //toHtml()方法接受一个Lambda表达式作为参数，该Lambda表达式将获取到的HTML源代码作为参数传递给textEdit的setPlainText()方法，
    //从而将源代码显示在textEdit窗口中。

 Effect：

          

高亮所有链接功能模块旨在提升用户浏览网页时对链接的可视化效果，使链接更加明显和易于点击。该模块的功能及设计如下：

模块功能：

• 识别页面中的所有链接元素，包括超链接、图像映射等。
• 为每个链接元素添加特定的样式或效果，以突出显示链接的位置和边界。

设计说明：

• 提供一个选项或按钮，允许用户启用或禁用高亮所有链接功能。
• 当用户启用该功能时，页面中的所有链接将以高亮样式呈现。
• 当用户禁用该功能时，页面中的链接将恢复到默认样式。

         效果展示：

         

           

 QString code = QStringLiteral(
        "qt.jQuery('a').each(function() {"
        "   var backgroundColor = qt.jQuery(this).css('background-color');"
        "   if (backgroundColor === 'rgb(255, 255, 0)' || backgroundColor === 'yellow') {"
        "       qt.jQuery(this).css('background-color', '');"
        "   } else {"
        "       qt.jQuery(this).css('background-color', 'yellow');"
        "   }"
        "})"
    );
    view->page()->runJavaScript(code);

第二个功能turn images upside down可以将图片进行翻转 （再次点击则返回）：

           效果展示：

             

 （倒过来的猴子看起来毫无违和感）

 QString code;

    if (invert)
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(180deg)') } )");
    else
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(0deg)') } )");
    view->page()->runJavaScript(code);

Tools：

        

     

移除GIF图像、内联框架和嵌入对象功能模块旨在提供对网页中的GIF图像、内联框架和嵌入对象的移除功能，以改善用户浏览体验和页面加载速度。该模块的功能及设计如下：

1. 移除GIF图像功能：
   • 提供一个选项或按钮，允许用户选择是否移除网页中的GIF图像。
   • 当用户选择移除GIF图像时，该功能模块将会检测网页中的GIF图像，并将其移除或替换为静态图像。
2. 移除内联框架和嵌入对象功能：
   • 提供一个选项或按钮，允许用户选择是否移除网页中的内联框架和嵌入对象，例如嵌入的音频、视频等。
   • 当用户选择移除内联框架和嵌入对象时，该功能模块将会检测网页中的内联框架和嵌入对象，并将其移除或隐藏。
3. 页面加载性能优化：

在移除GIF图像、内联框架和嵌入对象时，该功能模块应考虑页面加载性能优化，确保移除操作不影响网页的正常显示和功能。

void MainWindow::removeGifImages()
{
    QString code = QStringLiteral("qt.jQuery('[src*=gif]').remove()");
    view->page()->runJavaScript(code);
}
//在该函数中，首先创建了一个QString类型的变量code，用于存储要执行的JavaScript代码。
//然后，将code设置为qt.jQuery('[src*=gif]').remove()这段JavaScript代码。这段代码使用qt.jQuery选择器选中所有src属性中包含"gif"的元素，
//并使用remove()方法将这些元素从DOM中移除，即从页面中移除所有的GIF图像。
//最后，使用view对象的page()方法获取当前页面的QWebEnginePage对象，并调用runJavaScript()方法来执行存储在code变量中的JavaScript代码。

void MainWindow::removeInlineFrames()
{
    QString code = QStringLiteral("qt.jQuery('iframe').remove()");
    view->page()->runJavaScript(code);
}
//然后，将code设置为qt.jQuery('iframe').remove()这段JavaScript代码。这段代码使用qt.jQuery选择器选中所有的