javascript - 使用 Knockout : Visible changes not saved 控制网页

Question

尝试使用 Excel VBA 编辑网站。编辑似乎有效，但当我使用保存按钮时，没有任何内容被保存。为什么不保存屏幕上可见的更新数据？

此代码在 Internet Explorer 中打开一个网页，导航到我想要的位置，填写数据，所有这些都显示在屏幕上，使用各种方法，例如:

For Each objElement In objElementColl
ExtractedName = objElement.outerHTML
        
If InStr(ExtractedName, "NewPermit") > 0 Then
objElement.Checked = True

和

Set DropDown = objHTML.getElementById("ProjectFile-AccreditedCertifierId")
DropDown.selectedIndex = 1

或

objHTML.getElementsByName(ElementName)(0).Value = ValueCheck

所有工作和更改都显示在屏幕上。我点击保存使用:

Set objElementColl = objHTML.getElementsByClassName("btn")

For Each objElement In objElementColl
    ExtractedName = objElement.outerHTML
    
    If InStr(ExtractedName, "click: save, enable:") > 0 Then
        objElement.Click
        ExtractedName = 1
        Exit For
    End If
Next

哪个运行。问题是它不保存上述三个部分的更改。

我尝试过的

1. 暂停我的代码并手动点击保存(同样的问题)

2. 暂停我的代码，手动更改复选框并运行代码以保存(确实保存手动更改，但不保存编码的更改

3. 暂停代码并手动更改一个框并手动保存(仅保存手动更改的框)

从上面看，我的保存点击似乎有效，但尽管框明显改变并使用代码填充，可见和背景之间存在间隙。

一些 HTML 源代码。 Chrome 在检查我正在更改的元素时向我显示的是什么:

    <fieldset>
        <legend>Proposal</legend>

        <div class="col-xs-12 col-sm-8 col-md-6">
            <div class="row">
                <div class="col-xs-2 form-group">
                    <label for="ProjectFile_ProposalLot">Lot</label><input class="form-control" data-bind="textInput: ProjectFile().ProposalLot" maxlength="100" name="ProjectFile-ProposalLot" type="text" />
                </div>
                    <div class="col-xs-2 form-group" data-bind="visible: ProjectFile().StateId() != 7 && ProjectFile().StateId() != 5">
                        <label data-bind="text: ProjectFile().ProposalDpLabel()"></label>
                        <input class="form-control" data-bind="textInput: ProjectFile().ProposalDp" maxlength="100" name="ProjectFile-ProposalDp" type="text" />
                        </div>

我搜索了页面的源代码。我相信这可能很重要，但我不是 HTML 编码员。我把它缩短了一点

var ProjectFileEditViewModel=(function(){__extends(ProjectFileEditViewModel,ViewModel.Model);function ProjectFileEditViewModel(){ProjectFileEditViewModel.__super__.constructor.apply(this,arguments);};ProjectFileEditViewModel.prototype.fields=function(){return {"Id":new ViewModel.NumberField(0),"StateId":new ViewModel.NumberField(0),"DefaultOfficeAddressId":new ViewModel.ObservableField(),"Name":new ViewModel.ObservableField(),"ExistingApprovalDate":new ViewModel.DateField("DD/MM/YYYY"),"ProjectClosed":new ViewModel.ObservableField(),"ProposalAddress":new ViewModel.ObservableChildField(exports.AddressViewModel,this),"Zoning":new ViewModel.ObservableField(),"ProposalLot":new return ProjectFileEditViewModel;})();if(exports.ProjectFileEditViewModel==null)exports.ProjectFileEditViewModel=ProjectFileEditViewModel;

还有这个:

Buildaform.model=new Buildaform.ProjectPageViewModel({ ... ,"ProposalLot":null .... }

我认为这最后一个与它有关。不知道能不能改。

我不能公开网址或源代码。

Answer 1

由于相关网站无法共享，我可以想出一组提示来尝试:

如果网站将实现一个简单(纯)HTML 表单来发送 POST 请求，您的解决方案就可以了。但是看看你分享的 HTML

<label data-bind="text: ProjectFile().ProposalDpLabel()"></label>

data-bind 已经表明数据正在由图书馆收集/发送。 (例如 Knockout 正在使用该属性)。这个库现在可能会在某处收集数据，它可能会被 JavaScript 中的“点击”或“按键”事件触发。然后可以按照 GCSDC 的建议将收集到的信息存储在隐藏的 DOM 元素中，或者直接存储在 JavaScript 变量中。

我现在的建议是通过检查 HTML 源代码找出此页面上使用的 JavaScript 框架。在某个时候应该有一个

<script src="<fancy js framework>.js"></script>

HTML 中的标记，它应该为您提供框架的名称。 (实际上可以有多个这种标签，包括自定义 JavaScript 文件。这些标签不必位于 HTML 文档的开头，可以分散在整个文档中，因此您可能需要搜索 script 在 HTML 文档中。其中一个应该是发送请求的主要框架。如果您不确定它是哪一个，则必须将它们全部搜索并找出。)

然后，在框架文档的帮助下，研究如何在此页面的 JavaScript 代码中发送 POST(也许是 Ajax)请求。然后，通过在此页面上从 VBA 执行自定义 JavaScript 来发送请求； this 中显示了如何做到这一点发布。

或者，您可以尝试在表单输入上触发点击(或按键)事件，让框架相信您确实输入了它； post 中显示了如何做到这一点，但这可能并非在所有情况下都有效。