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);
},
});
Related
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);
},
});
How do I change open graph title dynamically before sharing on face book?
The code is
FB.ui(
{
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'og:url': myurl,
'og:title': mytitle,
'og:description': mydescription,
'og:image': myimageURL,
},
}),
},
function(response) {
console.log(response);
// Action after response
},
);
You can´t, that option was just a workaround that does not work anymore. You must provide correct OG tags in the source of the shared URL.
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 use pluploadQueue to upload files which all the function could work well except the showing, I think maybe it's due to style confict. I want to know, does anyone have meet this issue before that?
using MVC + bootstrap modal + bootstrap dialog + plupload Queue
I can't upload picture, how to get reputaton?
var uploader1 = $("#uploader1").pluploadQueue({
// General settings
runtimes: 'html5,silverlight,flash,html4',
url: '#Url.Action("PLUpload", "Document")' + '?hasModification=true',
chunk_size: '2mb',
//Allow multiple files
max_file_count: 10,
// Specify what files to browse for
filters: {
// Maximum file size
max_file_size: '20mb',
// Specify what files to browse for
mime_types: [
{ title: "Allowed files", extensions: "#Model.PLUploadAllowedExtensions" }
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
//// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'list'
},
init: {
PostInit: function () {
// Called after initialization is finished and internal event handlers bound. http://www.plupload.com/examples/events
// The uploader must in html4 only mode be initialized fully before it's hidden: http://stackoverflow.com/questions/11898082/plupload-html4-add-files-dialog-not-triggering-in-ie
// Prepare uploader
if ('#Model.HasUploadFiles' == 'True') {
$("#hasChanged").attr('value', true);
$("#uploader1").show();
} else {
$("#uploader1").hide();
}
//// Force resize function is not working. this is the fix for window size
//$('#formID').css("overflow", "hidden");
},
},
// Flash settings
flash_swf_url: '#Url.Content("~/Scripts/plupload/Moxie.swf")',
// Silverlight settings
silverlight_xap_url: '#Url.Content("~/Scripts/plupload/Moxie.xap")'
});
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()