I have an extjs iframe created as below which gets rendered onto a page when called using its xtype. The URL I use in the src parameter redirects to a login page. Is it possible to pass the username and pwd along with the URL in someway so the content from that URL gets embedded directly without having to see the login screen first? If so, how can this be achieved?
Ext.define('myComp', {
extend:'Ext.container.Container',
xtype: 'iframe'
itemId:'iframe204'
requires: [
'Ext.ux.IFrame',
],
layout:'fit',
height:'100%',
initComponent:
function() {
this.items = [];
this.items.push({
xtype:'uxiframe',
itemId:'myframe',
height:'100%',
src: someURL
});
this.callParent(arguments);
},
});
Related
I have an extjs iframe created as below which gets rendered onto a page when called using its xtype. However, the page displays "cannot connect to" the URL I specified in src parameter error message. But if I access the URL which I have in src parameter directly from the browser, I am able to access it. What is the issue here? Any suggestions would really help!
Ext.define('myComp', {
extend:'Ext.container.Container',
xtype: 'iframe'
itemId:'iframe204'
requires: [
'Ext.ux.IFrame',
],
layout:'fit',
height:'100%',
initComponent:
function() {
this.items = [];
this.items.push({
xtype:'uxiframe',
itemId:'myframe',
height:'100%',
src: someURL
});
this.callParent(arguments);
},
});
I want to dynamicaly inject and load an iframe inside the background page. But every time, the request is canceled.
http://i.imgur.com/Puto33c.png
That used to work a week ago. I don't know where I'm wrong.
To reproduce this issue, I created a small extension :
manifest.js :
{
"name": "iframe background",
"version": "1.0.0",
"manifest_version": 2,
"browser_action": {
"default_title": "iframe"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
}
}
background.js :
chrome.browserAction.onClicked.addListener(function() {
var iframe = document.createElement('iframe');
iframe.src = 'http://localhost:3000/';
iframe.onload = function() {
console.log(iframe.contentDocument); // return null
};
document.body.appendChild(iframe);
});
The page to load is not blocked by X-Frame-Options SAMEORIGIN.
I tried to put the iframe directly within a HTML background page with no luck.
I also tried to add an content_security_policy :
"content_security_policy": "script-src 'self'; object-src 'self'; frame-src 'self' http://localhost:3000/"
But the iframe still doesn't load.
Does someone has a workaround or a solution to this problem?
Thanks !
Chrome 58.0.3014.0 enables Site Isolation for extensions by default that makes the iframe load in a different renderer process handled by a separate chrome.exe OS process.
The 'canceled' message means that the extension's chrome.exe process canceled the request and it was handled by a different hidden chrome.exe process.
The correct approach is to declare a content script that will automatically run on the iframe URL and communicate to the background page. Note: only JSON-fiable data may be passed, in other words, you can pass innerHTML but not DOM elements. This is easy to handle though via DOMParser.
manifest.json additions:
"content_scripts": [{
"matches": ["http://localhost:3000/*"],
"js": ["iframe.js"],
"run_at": "document_end",
"all_frames": true
}],
iframe.js:
var port = chrome.runtime.connect();
// send something immediately
port.postMessage({html: document.documentElement.innerHTML});
// process any further messages from the background page
port.onMessage.addListener(msg => {
..............
// reply
port.postMessage(anyJSONfiableObject); // not DOM elements!
});
background.js:
var iframePort;
chrome.browserAction.onClicked.addListener(() => {
document.body.insertAdjacentHTML('beforeend',
'<iframe src="http://localhost:3000/"></iframe>');
});
chrome.runtime.onConnect.addListener(port => {
// save in a global variable to access it later from other functions
iframePort = port;
port.onMessage.addListener(msg => {
if (msg.html) {
const doc = new DOMParser().parseFromString(msg.html, 'text/html');
console.log(doc);
alert('Received HTML from the iframe, see the console');
}
});
});
See also a similar QA: content.js in iframe from chrome-extension popup
I have a route like this:
Router.route('/box', function () {
this.render('boxCanvasTpl');
},{
name: 'box',
layoutTemplate: 'appWrapperLoggedInTpl',
waitOn: function() {
console.log("Box route ran ok.");
return [
Meteor.subscribe('item_ownership_pub', function() {
console.log("subscription 'item_ownership_pub' is ready.");
}),
Meteor.subscribe('my_items', function() {
console.log("subscription 'my_items' is ready.");
})
];
}
});
... and I am clicking a link in a Template like this:
My Link
I receive the 'Box route ran ok.' message, but some reason the page does not navigate to the given URL. I have added console.log code in the funciton that is run when the 'boxCanvasTpl' is rendered, but these aren't showing in the browser console. It seems that something inbetween is stopping the templkate from re-rendering, but can't put my finger on it - any ideas?
There are some properties of Iron Router that you need to be aware of.
Say that the user is currently already on /boxes and there is a box template that renders for that path. If you:
click on a link Click Me
or
click on a link Click Me
Iron Router will NOT re-render the template because it already exists on the page. It will also NOT re-render the template if the box template happens to be a partial template that is already rendered on the page that you're on and also exists on the page that you want to navigate to.
Since it doesn't re-render, any code you have inside Template.box.onRendered will also not run again.
This behavior is most common in your layout, header, and footer templates. For many users, these templates are used for all of a website's pages, regardless of path. Because the layout, header, and footer template is rendered on a person's first visit to the site, they won't be re-rendered ever again if the user decides to navigate to other parts of the site using the same templates, so the code inside Template.layout/header/footer.onRendered won't fire.
Also note - even if a reactive Spacebars helper changes the physical look of the layout / header / footer, it doesn't qualify as an actual render, so reactive updates to the template do not trigger the onRendered callback.
The lack of re-rendering is what gives Meteor that "snappy" feel.
EDIT
Try to code in a reactive, event-driven style. Try not to think too much in a render / re-render sense.
You go to /box
You click on a link for /box?box=2342
Get your params or query in Iron Router
https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#route-parameters
In Iron Router use the data from the params or query to set the data context for the template.
Grab stuff from the data context as needed inside of the template's .onRendered, .events, and .helpers callbacks.
Set Session vars as necessary and use them in helpers to give reactive changes to the page without having to re-render a template. Also use events to trigger updates to the session vars to, again, trigger reactive changes to the page.
Try this:
afterwards, go to /test?BUNNIES=lalalala
check out the console logs
test.html
<template name="test">
{{myData}}
</template>
test.js
Template.test.helpers({
myData: function() {
console.log("data context accessed from test.helpers: ", this);
console.log("this.BUNNIES accessed from test.helpers: ", this.BUNNIES);
return this.BUNNIES;
}
});
Template.test.onRendered(function() {
console.log("data context accessed from test.onRendered: ", this.data);
});
Template.test.events({
'click': function(){
console.log("data accessed from test.events: ", this);
}
});
router.js
Router.route('/test', function() {
console.log("routed!");
this.render('test');
}, {
name: 'test',
data: function(){
//here I am setting the data context
// for /test?BUNNIES=1234
var query = this.params.query;
console.log("query: ", query);
return query;
},
waitOn: function() {
console.log("waitOn is running (should see this message once for each subscription)");
return [
Meteor.subscribe('item_ownership_pub'),
Meteor.subscribe('my_items')
];
}
});
way cleaner way of writing router
Router.route('/test', {
waitOn: function() {
console.log("waitOn is running (should see this message once for each subscription");
return [
Meteor.subscribe('item_ownership_pub'),
Meteor.subscribe('my_items')
];
},
data: function(){
var query = this.params.query;
console.log("query: ", query);
return query;
},
action: function(){
console.log("this will re-render if url params changed");
this.render();
}
})
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
I have a Ext JS Window with a spring form of user details. Additionally, I have an user validator in my controller, so that, if the form has errors i can see what errors are:
UserValidator userValidator = new UserValidator();
userValidator.validate(user, result);
if(result.hasErrors()){
return "RegisterUserForm";
My problem is relative to have this form inside a ExtJS window. If i return "RegisterUserForm" the browser goes to this form and show the errors but not in the window. It shows the form and errors in a new page and the url changes to /RegisterUserForm. (This is obvious) How can i show the same form with errors without having this problem?
Thank you
There are 2 options:
Change your server code to make that an AJAX call that returns only the data to be handled by your ExtJS code, rather than a form page
Make your Ext.window.Window use an iFrame with the /RegisterUserForm url:
ex:
Ext.create('Ext.window.Window', {
layout: 'fit',
//other config here
items: [{
xtype: 'component',
autoEl: {
itemId: 'iframe',
tag: 'iframe',
src: '/RegisterUserForm',
frameBorder: 0
}
}]
}).show()