Question

我的网页上有一个Netresults表单，我需要预先填写。使用javascript将表单插入到页面中，因此我无法在源代码中看到表单字段。

如果表单在我的页面上，我会使用下面的代码但不是，我不知道如何定位字段。有人可以帮忙吗？

var keywords = getUrlParameter('keywords');

$('input[name=netres-keywords]').val(keywords);

使用以下代码插入netresults表单：

(function() {
    var $__MAForm;
    ($__MAForm =function(){
        if(typeof($__MA)=="undefined"){
            return window.setTimeout($__MAForm,50);
        }else{
            $__MA.addMAForm("43788303-2b62-4774-ad0f-63542e3ed92a", "forms.example.com");
        }
    })();
})();

Answer 1

这可能需要使用Mutation Observer。

变异观察者将检查DOM的更改（添加的元素等），我们可以使用它来触发事件。每当新的netres-keywords元素添加到<form>时，以下代码都会更改名为<body>的输入值。

在本文底部的示例JSFiddle中，我创建了一个模拟正在添加到页面的表单的按钮。如您所见，文本框将预先填充。

EXAMPLE JSFIDDLE

＆＃13;

$(document).ready(function() {

    var keywords = "this is a test keyword";
    var formCount = $("form").length;

    var observer = new MutationObserver(function() {
        var newFormCount = $("form").length;
        if (newFormCount > formCount) {
            $('input[name=netres-keywords]').last().val(keywords);
        }
    });

    $("button").click(function() {
        $form = $("<form>").html("<h1>New form:</h1><input type='text' name='netres-keywords'>");
        $("body").append($form);
    });
    
    var observerConfig = {
        attributes: true, 
        childList: true, 
        characterData: true 
    };
    
    var targetNode = document.body;
    observer.observe(targetNode, observerConfig);
});

＆＃13;

form {
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
    padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
    SIMULATE ADDING FORM
</button>
<br>
<br>

＆＃13;

JQuery - 在第三方表单上预填充表单字段

1 个答案: