使用CasperJs自身加载页面时，加载页面的Javascript [英] Load The Javascript Of The Page While Loading The Page Itself With CasperJs

问题描述

我正在尝试提交表格.当我使用firefox时，页面将被加载，然后打开firebug，我可以看到一个名为"content_html" 的输入字段，但是当我从视图页面中检查页面的来源时源" ，我看不到输入字段"content_html" .我进一步检查，发现有一个javascript将在浏览器中加载以显示该输入字段.代码就像

I am trying to submit a form. When I am using firefox the page will be loaded then I open the firebug I can see a input field named "content_html" but when I go to check the source of the page from "view page source" I do not see the input field "content_html". I checked further and found out there is a javascript which will be loaded in the browser to show that input field. The code is like

geteditorinit("http://example.com/pub","data[content_html]",298996,1,750,350,0,0,"content_html");

因此，我可以得出结论，只有当我访问包含此表单的页面时，执行此javascript代码之后，才会加载"content_html" 隐藏的输入字段.我需要为该输入字段分配一些值才能提交表单.由于我无法像在浏览器中那样获得可操纵的Javascript HTML，因此使用CasperJs无法使用CSS选择器为其分配任何值.因为CSS选择器找不到此隐藏的输入字段.如何加载包含其中的javascript的页面，以便获得类似于firebug的HTML，该HTML会向我显示输入字段以便能够提交它?
登录后，我转到包含要提交的表单的页面

So I can conclude that "content_html" hidden input field will only be loaded after this javascript code is executed when I visit the page which contains this form. I need to assign some value to this input field to be able to submit the form. Since I cannot get the manipulated Javascript HTML ,like the one I get in the browser, with CasperJs I am not able to assign any value to it with CSS selector. Because the CSS selector does not find this hidden input field. How can I load the page with the javascript it contains so I can get HTML like firebug which shows the input field to me to be able to submit it?
After I login, I go to the page which contains the form I want to be submitted like this

casper.thenOpen(POST_URL, function(){
          //Here I type the code to fill the form
});

P.S. [1] 如果PhantomJS是完整的浏览器，并且我不需要运行Javascript，那么为什么我不能使用CSS选择器来获取此隐藏的输入字段呢?
上面的图片摘自 Firebug .如您所见，它以无色模式显示输入字段.我希望能够选择"content1_html" 并为其设置值，然后提交我的表单.
P.S. [2] 我发现，当我加载发布页面时，它将单独向另一个页面发出ajax请求，以自动保存"content1_html" 的内容.我需要打开发布页面，向另一个页面发布"content_html" 的发布请求，然后单击我已经加载的页面上的提交.我可以制作另一个标签或打开另一个网址，而不会丢失我已有的数据吗?因为每次刷新后，表单令牌都会更改，而我将无法成功提交该帖子.

P.S. [ 1 ] If the PhantomJS is a full browser and I don't need to run Javascript then why I cannot fetch this hidden input field with CSS selector?
The above picture is taken from Firebug. As you see it shows the input field in colorless mode. I want to be able to select "content1_html" and set value to it then submit my form.
P.S. [ 2 ] I have found that when I load the posting page, it will separately make an ajax request to another page to autosave the content of the "content1_html". I need to open the posting page, make a post request for "content_html" to another page, after that click the submit on the page I have already loaded. Can I make another tab or open another url without losing the data I already have? because after each refresh the form token would be changed and I will not be able to submit the post successfully.

推荐答案

有多种选择该元素的方法.例如，您可以尝试使用以下CSS选择器，它们会根据页面上的哪些元素而起作用:

There are multiple ways to select that element. You can try for example the following CSS selectors and they would work depending on which elements are also on the page:

• "input[name = 'data[content1_html]']"基于完全匹​​配的名称属性
• "input[id ^= 'hdndata[content1_html]']"基于id属性的开头

• "input[name = 'data[content1_html]']" based on exact name attribute match
• "input[id ^= 'hdndata[content1_html]']" based on beginning of id attribute

现在，要更改值，您需要使用casper.evaluate()，因为只能通过此功能访问DOM，而CasperJS在这种情况下不提供任何便利功能.它是沙盒，因此您需要显式传递值.

Now, to change the value, you need to use casper.evaluate(), because the DOM can only be accessed through this function and CasperJS doesn't provide any convenience functions for this case. It's sandboxed, so you need to explicitly pass the values in.

casper.evaluate(function(selector, value){
    document.querySelector(selector).value = value;
}, selector, value);

可能需要等到该输入字段出现在页面中之后:

It may be necessary to wait until that input field is present in the page:

casper.waitForSelector(selector, function then(){
    this.evaluate(function(selector, value){
        document.querySelector(selector).value = value;
    }, selector, value);
    // Do something to submit the form
});

如果在提交表单之前将此隐藏的输入添加到DOM就足够了，那么这里是代码:

If it is enough to add this hidden input to the DOM before submitting the form, here is the code for this:

casper.evaluate(function(value){
    var parent = document.querySelectorAll(".rteDiv")[1];

    // get dynamic ID
    var id = parent.querySelector("[id ^= 'Buttons1_']").id.replace("Buttons1_rte", "");

    var input = document.createElement("input");
    input.type = "hidden";
    input.id = "hdndata[content1_html]_" + id;
    input.value = value;
    input.name = "data[content1_html]";

    parent.appendChild(input);
}, value);

我假设第二个.rteDiv是您要使用的那个，因为另一个是演示.

I assume that the second .rteDiv is the one that you want to use, since the other one is the demo.

这篇关于使用CasperJs自身加载页面时，加载页面的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！