Web programming (Flexbox)

[Kwai chang caine]

Hello at all

Someone knowing something about FlexBox in web programming ?
If yes, this someone know if it's possible to read the text into it ?

Have a good day

[Derren]

what to you mean?
flexBox is just a way to display several containers (div, usually) in a table/grid-like structure. And those divs can contain any text, just like always.

[HanPBF]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[J. Baker]

Flexbox is awesome! And yes, you can put text in it.

https://www.w3schools.com/csS/tryit.asp ... x_website2

[Kwai chang caine]

First, i want to thanks you all for your answer
Because all the days of this week i have try to understand why the rendered html not appears when i do a "document.getElementById("myBtn").innerText or document.getElementById("myID").innerHTML" and several other JS commands who usually give the whole HTML of the object
And it's exactely the same thing to obtain the rendered html of the page "document.getElementsByTagName('html')[0].innerHTML", "document.getElementsByTagName('html')[0].innerHTML", "document.documentElement.innerHTML", "new XMLSerializer().serializeToString(document.doctype) + document.documentElement.outerHTML" all that return the same html when i right click on the browser page and do "View the source" and not the full rendered html

But in this case impossible, the browser say to me the object not exist when i ask all command about an object inside the flexbox
However it's incredible because the "DOM inspector" F12 have exactely the same behaviour than usually, and all the HTML appears, even in the flexbox
In fact the inspector is the only one to see the rendered html, all the JS commands or other tools not see the Flexbox code"

I have also try puppeter with nodejs, with is "pagecontent" and it's exactely the same thing...nothing, except the div where the Flexbox is
I have try all i have found before disturb the PB forum, and read dozens forum page and nothing works...always the main div of this damned Flexbox
I have also, try all the browser (Safari, FF, Chome, Lynx, Webie, opera, etc ...) and i can't have what i search to do.

In fact, what i want to do is the thing the most simple and logic of the word.....recover the FULL HTML with JS and all the HTML who is display by the browser, and it's impossible

I have also try, run chrome with the option "-dump-dom", then this time i obtain apparently something but i have another problem.
The full HTML than i want to have, is not the first page.
In the first page, it's a complex login/password impossible to send the password, because i have also try WGET with sending Login/Password and the site not recognize it, and i not have better effect with CURL
It's the https site of my bank, and it's normal the protection is at the maximum...

Then when i launch "-dump-dom" i have html, but after....how i can enter the password, mainly with an headless browser, because the "-dump-dom" works only if the browser is invisible...
And i not have found a way for say to the browser to resend the "-dump-dom" another time after he works...
For do that i have try the splendid code of ZIKITRAKE or INFRATEC for read the stdout and relaunch several time chrome, but like i have only one "-dump-dom" by run this is useless

You are going to laugh, but after have try all the nodejs module without effect, also try to create my own addon (and even them in direct writing the full html not give the rendered code)...i have also try before to modify and recompile the FF source code....but there are so much page, i have not found where is the really full html just before it is reading and display

I am desperate then i have thinking to ask in the familly forum, even if it's not PB, because it's the only one forum where the answers is quick and the members really try to help.
And i know that several of the PB members is also strong in web programming

Thanks a lot my friends for your interest at my sad case

[firace]

Hi KCC, are you unable to get the innerHTML of any page with a flexbox, or is the problem specific to your bank's page?
If it is any page, can you provide an example URL that we could test?

[#NULL]

If you can't find the element in the original DOM then it might be added later by javascript.

[Derren]

If you can't get the text from an element, it's likely because the text is put there dynamically via a script.

Here's a very crude example.
https://jsfiddle.net/xmqugL60/

The text you DO want is not in the alert box, because it is put there after you retrieve it.

You have to wait fo the page to render.
I have used a timer to check an element's content. As long as it was empty, I waited like 50ms and then checked again. Not elegant, but I couldn't get a promise to work that would return after the dom was fully loaded and built.

[Kwai chang caine]

Hi KCC, are you unable to get the innerHTML of any page with a flexbox, or is the problem specific to your bank's page?
If it is any page, can you provide an example URL that we could test?

Hello FIRACE
In fact i don't know, because it's the first time i have this style of problem
And i don't know another site with this system

It's the reason why i have ask to you if your nice browser can read rendered whole HTML and export it
A possible export (Stdout, txt, etc...) and a style of simple OLE automation or accept the JS injection would be a very precious option
Because, as time goes by, more and more, FF lock all the method for simply remote his browser (Scrathpad deprecated, JS injection locked, Add-on signed, etc ...)

At the beginning i believe to be behind a JAVA pluggin or something like this, because it's also impossible to select the text on the page, like on pluggin JAVA or FLASH
But after see the source code, i have see AWT and see it's a JAVA (Abstract Window Toolkit ) and that confirm my mind
Furthermore in the code i have also see Flex-Box and it's the reason of my question

Code: Select all

<body class="main-body">
        <div id="awt--root-element" class="awt--root-element">
            <div id="sdcWrapper" class="sdcWrapper"></div>
        <script>
            
            var awtConfig = function(gf, sdc, options) {
                window._awtConfigParams = {
                        gf: gf,
                        sdc: sdc,
                        options: options
                    };
            };

            awtConfig.prototype.load = function () {
            };
        </script>

        <script>
    var awtParams = {
        defaultGf: "zco",
        defaultSdc: "zco",
        defaultRoute: 'zco',
        hasCoque: false,
        autoRemoveLoader: true,
        loader: '<div class="load"><div class="load-anim"><div class="load-spinner"></div></div></div>'
    };
    window.myApp = new awtConfig('zco', null, awtParams);
    window.myApp.load();

</script>

        <script>
            awtConfig = null;

            (function(){
                'use strict';
                function loadAwtConfigScript(callback) {
                    var head = document.getElementsByTagName('head')[0];
                    var scriptElement = document.createElement('script');
                    scriptElement.type = 'text/javascript';
                    scriptElement.src = "/icd/zco/awtConfig.js";

                    if(!callback) callback = function(){}; // ★★★★★★★★★ JUST ADD THIS LINE!

                    // bind the event to the callback function
                    if(scriptElement.addEventListener) {
                        scriptElement.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
                    }
                    else if(scriptElement.readyState) {
                        scriptElement.onreadystatechange = function(){
                            if( this.readyState === "loaded" || this.readyState === "complete" ){
                                callback.apply(this, arguments);
                            }
                        }; // IE8
                    }

                    // fire the loading
                    head.appendChild(scriptElement);
                }

                function initAwtConfig() {
                    loadAwtConfigScript(function() {
                        window.myApp = new awtConfig(
                                (window._awtConfigParams && window._awtConfigParams.gf) || (typeof(awtParams) !== "undefined" && awtParams.defaultGf) || null,
                                (window._awtConfigParams && window._awtConfigParams.sdc) || (typeof(awtParams) !== "undefined" && awtParams.defaultSdc) || null,
                                (window._awtConfigParams && window._awtConfigParams.options) || awtParams);
                        window.myApp.load();

                        window._awtConfigParams = null;
                    });
                }
                setTimeout(initAwtConfig, 0);

            })();
        </script>
        </div>

    </body>

    </html>

This is the site of my bank, but it's after the first page i try to read
https://www.banque-rhone-alpes.fr

And for go to the second page...you need my LOGIN/PASSWORD, it's the problem

If you can't find the element in the original DOM then it might be added later by javascript.

If you can't get the text from an element, it's likely because the text is put there dynamically via a script.

But when i ask manually in the scratchpad "document.getElementsByTagName('html')[0].innerHTML" or other style of commande, the page is finished since a long time no?
So why all the TAGS and HTLM code is in the DOM INSPECTOR and the scratchpad say [Nulll object]
I hate web langage

[Derren]

When you use the Dom-Inspector (arrow cursor to select an element and it shows the part in the dom/source), do you see the content of the div or is it empty?

Does the site have any frames?
I learned this the hard way. When I asked Chrome to give me the path to the element, it just said for example "#myDiv", because it had an ID "myDiv".
But the whole element was actually inside a frame.
So to access it, I couldn't use document.getElementById("myDiv")
I had to use something like

Code: Select all

var iframe = document.querySelector("....")
var actualDiv = iframe.querySelector("#myDiv")

But in this case, I think the element was not empty, but I got an error, that the element didn't exist. So that's probably not your issue, either.

[Kwai chang caine]

Yes, it's that the thing incredible, the inspector see all what i need

In this example :



the second line "08/03/2017 CHEQUE N° 000023 -19.95" is good in

Code: Select all

<div class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">08/03/2017<br>&nbsp;</div>
<div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on">CHEQUE N° 000023<br>&nbsp;</div>
<div class="x-grid3-cell-inner x-grid3-col-4" unselectable="on">-19.95<br>&nbsp;</div>

[#NULL]

- How are you trying to get the element? Maye your query/selector is wrong?
- In the inspector look up the hierarchy from the div to the root element if there is an iframe elemtent as parent on any level. If your javascript is running in the outer/main document then in most cases you cannot access the dom of the iframe content.

[Kwai chang caine]

Yeeeeeesss !!! i have understand !!!!! miracle
I understand quickly, but you must explain to me a long time
You have right, i have see an IFRAME, look at yourself

[#NULL]

What you can try to do is getting the src attribute of the iframe (the url) and load that as a page on its own. Maybe you have resolve the relative url to an absolute one to to that. When you have the actual iframe content as your main document you can run your js query in there.
As a start, just copy the src from the inspector and open it in a new browser window/tab to try.

[Kwai chang caine]

Oulala !!!!! very complex for a beginner of beginner your tip

Because me in the same time, i have run in the webconsole

Code: Select all

var iframe = document.getElementById('iframe-page-content');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
console.log(innerDoc);

and i have this answer

undefined