PDA

View Full Version : script tags inside panel html



PV-Patrick
16 Oct 2011, 3:47 PM
Is it possible to place script tags inside the html portion of a panel and have it run the contents? Trying to display a site seal that's a javascript url from godaddy.

bt_bruno
16 Oct 2011, 5:33 PM
If you refer to html config option, this handles plain raw HTML and no scripts get executed, nor loaded. I would go by using a loader, as documented in Ext.AbstractComponent#loader (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-loader) and Ext.ComponentLoader (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentLoader)


new Ext.Component({
tpl: '{firstName} - {lastName}',
loader: {
url: 'myPage.php',
renderer: 'data',
scripts: true,
params: {
userId: 1
}
}
});

You just have to add scripts: true, and scripts are loaded and executed.

Another solution would be using Ext.Element.update() method. It has a second parameter (not documented, so be careful) which is scripts. So something like this works:


Ext.create('Ext.Panel',{
width: 800,
height: 400,
renderTo: Ext.getBody(),
listeners: {
render: function(panel) {
panel.body.update('<script>alert(1);</script>', true);
}
}
});

Cheers!

PV-Patrick
17 Oct 2011, 2:20 PM
Hum, I can't seem to get this to work.


xtype : 'panel',
width : 100,
height : 25,
listeners : {
afterrender : function(p) {

p.body.update('<script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=hashid"></script>', true);
}
}


It seems to somewhat go as I receive the following error in chrome console: "Resource interpreted as Script but transferred with MIME type text/plain."

Any additional notes bt_bruno? I appreciate the help!

skirtle
17 Oct 2011, 2:52 PM
Have a look in the Network tab. You should be able to see the contents of the file that's coming down. Does it look the way you expect?

bt_bruno
17 Oct 2011, 4:31 PM
Hum, I can't seem to get this to work.

I did another test, this time loading scripts using src attribute. Everything worked fine in firefox and chrome. Take a look:


Ext.create('Ext.Panel',{
width: 800,
height: 400,
renderTo: Ext.getBody(),
listeners: {
render: function(panel) {
panel.body.update('<script src="http://docs.sencha.com/ext-js/4-0/extjs/examples/window/window.js"></script>', true);
}
}
});

My panel is created, window.js file is loaded, and the windows are created. As @skirtle said, try to use network tab in your debugger tool. Let's hope the issue is inside the script loaded and executed, not in our routine.

Cheers!

PV-Patrick
17 Oct 2011, 7:07 PM
Hi Guys,
The response via Network is what it should be. I compared it with the working version that's just in HTML and not being executed through extjs. It's just not displaying the image through extjs. It's a site seal from godaddy ssl.

skirtle
18 Oct 2011, 4:14 AM
Inspect the elements in the page. Check that the SCRIPT tag has been included by the call to update(). The request you're seeing implies this is working but I'd like to confirm.

Once the SCRIPT tag has been injected it's out of Ext's hands, it's all down to the browser. If the script isn't working at this point then it might be due to the way the script is written. There are many reasons why a script injected after the page is loaded might not work. It might be a deliberate security mechanism, or it might be using document.write(), or it might be waiting for a DOM event that has already fired. Have a read of the script, see if you can see anything obvious. If not, see if you can track down an FAQ from GoDaddy.

evant
18 Oct 2011, 4:18 AM
I can't remember which though I do recall browsers won't execute external scripts when using innerHTML.

Try creating a script element and setting the src instead.

PV-Patrick
18 Oct 2011, 1:43 PM
Try creating a script element and setting the src instead.

Can you elaborate a little on what you mean by this? Are you speaking about Ext.Element and then just having the <script src=".." id=".."> in the HTML or? Sorry if I didn't quite understand; thanks!

skirtle
18 Oct 2011, 2:07 PM
I believe he was suggesting something a bit like this:

http://docs.sencha.com/ext-js/4-0/source/Loader.html#Ext-Loader-method-injectScriptElement

PV-Patrick
18 Oct 2011, 8:49 PM
Not quite sure how to get that work, tried a few things and haven't had any luck.

skirtle
19 Oct 2011, 5:12 AM
The injectScriptElement method of the dynamic loader injects SCRIPT tags by creating elements using JavaScript (as opposed to innerHTML). You should be able to use a similar technique to inject your own scripts. I suggest spending some time studying that method, it isn't very long. Once you understand it you should be able to write something similar.

If you can't get it to work then you'll need to post the code you're using so we can help you. If you have any questions about how injectScriptElement works then feel free to ask but you may find a Google search a faster way to get answers those kinds of questions.