New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Script handling made transparent #156

Open
arvgta opened this Issue Oct 23, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@arvgta
Owner

arvgta commented Oct 23, 2018

Solved, but I'll leave this issue open for a short while, in case anyone has any feedback...


Prior to release 7.2.5, any scripts on the target page were rebuilt on the main page, by dynamically creating a new script tag along with its contents and attributes.
Instead, I would like to pass through inline scripts and external script references without tampering with them from now on.

1. Inline scripts

The new logic is very simple:

$s.clone().appendTo($.cd("g")) //append inline script to content div

(where $s holds the jQuery script object of the target page)

...and it works!

2. External scripts

The ideal approach:

Analogue to the above, I tried the following logic:

$S.clone().appendTo("head"); //appending to content div results in the same behaviour

...which works functionally, but unfortunately triggers the following warning, coming from jQuery itself:

Synchronous XMLHttpRequest on the main thread is deprecated

(that is a known issue in the jQuery community and does not come from Ajaxify)

Question: Is it possible to workaround the above warning or suppress it?


The old approach:

//Insert single external JS script - we have to go low level to avoid a warning coming from jQuery append()
//But we'll do our best to support all salient attributes
var script = document.createElement("script"), Type = $S.attr("type"), aSync = $S.attr("async"), deFer = $S.attr("defer");
if(Type) script.type = Type;
script.src = url;
script.async = aSync ? true : asyncdef;
if(deFer) script.defer = true;
document.head.appendChild(script)

...(where $S holds the jQuery script object of the target page and asyncdef is usually false)

The old approach does not trigger the above warning

However, the core script attributes are not all supported, not to mention the global HTML attributes...


The new approach:

Employs this technique I found at stackoverflow.com

...more specifically, this looks really promising:

//Insert single external JS script - we have to go low level to avoid a warning coming from jQuery append()
//But we'll do our best to support all salient attributes
var script = document.createElement("script");
_cloneAttributes(script, $S); //clone all attributes of script element generically
document.head.appendChild(script); //it doesn't matter much, if we append to head or content div

cloneAttributes: function (el, $S) { //clone all attributes of script element generically
     var attr, attributes = Array.prototype.slice.call($S[0].attributes); //slice performs a copy, too
     el.async = asyncdef; //initialise with asyncdef - may be overwritten in the while loop
     while(attr = attributes.pop()) { //fetch one of all the attributes at a time
         el.setAttribute(attr.nodeName, attr.nodeValue); //low-level insertion
     }
 }

...and it works!

arvgta added a commit that referenced this issue Oct 24, 2018

@arvgta arvgta removed the question label Oct 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment