I have a block of JQuery that was already provided by the previous developer but I am not 100% sure I understand what it is doing. I thought it had to do with setting the height of an iFrame based on its contents.
var iframeId = "iframeFinancial";
var origin = "http://content.net";
//I am not 100% sure what is going on over the next 3 lines
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventListener = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventListener(messageEvent,function(e) {
var message = e.data;
if(e.origin !== origin) return; // change to vanity url if applicable
updateIFrame(message);
},false);
function updateIFrame(msg) {
console.log('In Update Iframe Function');
if(typeof msg != 'object') {
var iframe = document.getElementById(iframeId); // iframe id
iframe.setAttribute('height',msg);
} else { // for multiple iframe support
var id = msg.id;
var height = msg.height;
var object = document.getElementById(id);
object.setAttribute('height',height);
}
}
But when the iFrame loads I never make it into the updateIFrame function based on what I am seeing in the console.
I also tried the following on my own but got this error:Error: Permission denied to access property "document"
document.getElementById("iframeFinancial").onload = function()
{
var iFrameID = document.getElementById('iframeFinancial');
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
console.log('In new function');
}
I checked the page being loaded into the iFrame and found the following snippet of JS at the bottom of the page:
(function ($) {
var wrapper = document.getElementById('wrapper'); // the container element of the phx content.
var height = Math.max( wrapper.offsetHeight, wrapper.scrollHeight );
parent.postMessage(height,"*");
}(Phx.$));
Based on what is shown here do I need to update the JQUERY mentioned at the top of the question.
Related
I got a problem two days ago, i needed to get height of iframe from another domain and catch it at parent domain to display iframe without scrollbar.
I solved it this way.
PostMessage function at child domain, sending height of div to parent domain.
window.onload = function () {
var offsetHeight = document.getElementById('LoanToggler').offsetHeight;
parent.postMessage(offsetHeight ,"*");
};
And the function at parent domain catches Message coming from child domain.
var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var myEventListener = window[myEventMethod];
var myEventMessage = myEventMethod == "attachEvent" ? "onmessage" : "message";
myEventListener(myEventMessage, function (e) {
if (e.data === parseInt(e.data))
document.getElementById('sizetracker').style.height = e.data + "px";
}, false);
It works dynamicly very well. child's height is always different so function catches it every time and displays at parent domain.
Now about my problem.
For example i have parent.php file at parent domain where i already have one iframe index.php from child domain. I need second iframe too from same child domain but form.php.
I tried this :
Write same postMessage function in form.php but parent domain catches only one massage coming from children. i duplicated cater function at parent domain and chainged variables and function names but this didn't help.
Any ideas ?
Heh, here i find solution at last.
First child php file.
window.onload = function () {
var offsetHeight = document.getElementById('LoanToggler').offsetHeight;
parent.postMessage({v1: offsetHeight} ,"*");
};
Second child php file.
window.onload = function () {
var offsetHeight = document.getElementById('childdiv2').offsetHeight;
parent.postMessage({v2: offsetHeight} ,"*");
};
Parent file where are both iframes. The catcher function everything same as above but only changes two lines :
if (e.data.v1 === parseInt(e.data.v1)){
document.getElementById('sizetracker').style.height = e.data.v1 + "px";
}
if (e.data.v2 === parseInt(e.data.v2)){
document.getElementById('parentdiv2').style.height = e.data.v2 + "px";
}
Hi Im trying to trying to track down a good modern Vanilla Javascript modal/lytebox with iFrame support, essentially I have I number of links like below:
<a class="edit-html" href="/iframe.html?para=123"></a>
That I want to trigger the modal with iframe content, without having to embed anything other than JS/CSS in the page (i.e. no modal markup)
HighslideJS (http://highslide.com/examples/iframe.html) meets the main requirements(although it doesn't have a modern look and isn't open source) does anyone know of any alternatives?
I've had a look at this link http://planetozh.com/projects/lightbox-clones/ although the list looks quite old and only HighSlideJS meets my requirements on that list
So my main requirements are:
Vanilla JS (No dependencies)
Iframe Content determined by href tag
Actively Maintained, ideally on Github
Modal markup does not need to be manually embedded on page
Interesting to try to see how we could accomplish your iframe manipulation in a way that would degrade gracefully without script. The anchor tag attributes can do most of the heavy lifting.
Link
Link
<iframe name="iframe1" src="about:blank""></iframe>
Personally I think the best lightweight approach to dialogs is to use something sparse like the code below. They aren't often required to do much and therefore don't really require much in the way of being "maintained".
Fiddle here.
var Dialog = function(content, config){
/*
content: selector, element, or text to wrap into dialog body
config object parameters:
modal: boolean,
dialogClass: text,
createCallBack, renderCallBack, showCallBack, hideCallBack, toggleCallBack: functions
*/
var self = this;
this.config = config || {};
this.init = function(){
//check for an element passed as content or a selector corresponding to an element
self.content = content.tagName ? content : document.querySelector(content);
if( ! self.content){
//otherwise content is text to be appended to the dialog body
self.content = document.createElement("div");
self.content.innerText = content;
}
self.container = self.create();
self.body.appendChild(self.content);
if(document.body){
self.render();
}else{
document.body.addEventListener("load", self.render);
}
window.addEventListener("resize", function(){
self.size();
})
return self;
}
this.create=function create(){
self.container = document.createElement("div");
self.dialog = document.createElement("div");
self.head = document.createElement("h2");
self.closeButton = document.createElement("button");
self.body = document.createElement("div");
self.head.innerText = self.config.headerText || "";
self.dialog.appendChild(self.head);
self.dialog.appendChild(self.closeButton);
self.container.appendChild(self.dialog);
self.dialog.appendChild(self.body);
self.body.appendChild(self.content);
self.container.className = "dialog-container" + (self.config.modal ? " modal" : "");
self.dialog.className = "dialog " + self.config.dialogClass || "";
self.head.className = "dialog-head";
self.body.className = "dialog-body";
self.closeButton.className = "dialog-close";
self.closeButton.innerText = self.config.closeButtonText || "close";
self.closeButton.title = self.config.closeButtonText || "close"; self.closeButton.addEventListener("click", self.hide);
self.closeButton.setAttribute("type","button");
self.checkCallBack();
return self.container;
}
this.render = function render(){
document.body.appendChild(self.container);
self.checkCallBack(arguments);
return self.dialog;
}
this.show = function(){
setTimeout(function(){
self.container.classList.add("visible");
self.closeButton.focus();
self.checkCallBack(arguments);
return self.container;
},0);
}
this.hide = function hide(){
var iframe = self.dialog.querySelector("iframe");
if(iframe){
iframe.setAttribute("src","about:blank");
}
self.container.classList.remove("visible");
self.checkCallBack(arguments);
return self.container;
}
this.toggle = function(){
if(self.dialog.classList.contains("visible")){
self.hide();
}else{
self.show();
}
self.checkCallBack(arguments);
return self.container;
}
this.size = function(){
var padding = 80;
self.body.style.maxHeight = window.innerHeight - self.head.offsetHeight - padding + "px";
console.log(self.body.style.maxHeight);
return self.body.style.maxHeight;
}
this.checkCallBack = function(args){
var action = arguments.callee.caller.name,
callBackName = action + "CallBack",
args = Array.prototype.slice.call(args || []),
fn = self.config[callBackName];
if(fn){
args.unshift(action);
fn.apply(self, args);
}
return !!fn;
}
this.init();
}
//sample usage
var.modal = new Dialog("iframe", {modal: true});
I'm using CKEditor 4.4, and I tried to use ACF to force the image2 plugin to set width and height as CSS properties (in the style attribute), instead to use the corresponding <img> tag attributes.
In other terms, what I get now using the editor.getData() method is something like that:
<img src="text.jpg" width="100" height="100" />
but I want this other form:
<img src="text.jpg" style="width:100px;height:100px" />
I tried to reach this result using allowedContent and disallowedContent in the config.js file. This is what I tried (see this for references):
//Allow everything
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = "img[width,height]";
With this, the result is simply that width and height are no more set (neither as attributes nor in the style), the image cannot be resized and the Image Properties dialog no longer include the input boxes related to image size.
I also tried to reverse the solution propesed by Marco Cortellino in this StackOverflow answer, without positive results.
Can someone help me?
I solved the problem by override the downcast and upcast methods of image2 plugin (as Reinmar has suggested).
This method processes the image element before it is processed when the editor.getData() method is called.
Therefore, the following code represents a possible solution:
CKEDITOR.on("instanceCreated", function (ev) {
ev.editor.on("widgetDefinition", function (evt) {
var widgetData = evt.data;
if (widgetData.name != "image" || widgetData.dialog != "image2") return;
//Override of upcast
if (!widgetData.stdUpcast) {
widgetData.stdUpcast = widgetData.upcast;
widgetData.upcast = function (el, data) {
var el = widgetData.stdUpcast(el, data);
if (!el) return el;
var attrsHolder = el.name == 'a' ? el.getFirst() : el;
var attrs = attrsHolder.attributes;
if (el && el.name == "img") {
if (el.styles) {
attrs.width = (el.styles.width + "").replace('px', '');
attrs.height = (el.styles.height + "").replace('px', '');
delete el.styles.width;
delete el.styles.height;
attrs.style = CKEDITOR.tools.writeCssText(el.styles);
}
}
return el;
}
}
//Override of downcast
if (!widgetData.stdDowncast) {
widgetData.stdDowncast = widgetData.downcast;
widgetData.downcast = function (el) {
el = this.stdDowncast(el);
var attrsHolder = el.name == 'a' ? el.getFirst() : el;
var attrs = attrsHolder.attributes;
var realWidth, realHeight;
var widgets = ev.editor.widgets.instances;
for (widget in widgets) {
if (widgets[widget].name != "image" || widgets[widget].dialog != "image2") {
continue;
}
realWidth = $(widgets[widget].element.$).width();
realHeight = $(widgets[widget].element.$).height();
}
var style = CKEDITOR.tools.parseCssText(attrs.style)
if (attrs.width) {
style.width = realWidth + "px";
delete attrs.width;
}
if (attrs.height) {
style.height = realHeight + "px";
delete attrs.height;
}
attrs.style = CKEDITOR.tools.writeCssText(style);
return el;
}
}
});
});
The function below was used in two .php documents. This code works perfectly in the first but in the second document it only executes the first two assignment statements in the (mode=="on") condition.
In the first document "popoutfg" is an iframe found in the parent window.
In the 2nd document "popoutfg" is an iframe found within another iframe located in the parent window.
So basically the problem is in the 2nd one it only executes these two: temp1.style.visibility="visible"; and
temp2.style.visibility="visible"; .
Please and thank you! =3
function popout(mode, links, width, height, paddingh, paddingv)
{
var temp1 = document.getElementById("popoutfg");
var temp2 = document.getElementById("popoutbg");
if(mode == "on")
{
temp1.style.visibility = "visible";
temp2.style.visibility = "visible";
temp1.style.width = width;
temp1.style.height = height;
temp1.style.left = paddingh;
temp1.style.right = paddingh;
temp1.style.top = paddingv;
temp1.style.bottom = paddingv;
temp1.src = links;
}
if(mode == "off")
{
temp1.style.visibility = "hidden";
temp2.style.visibility = "hidden";
}
}
Add
alert(width);
before
temp1.style.width = width;
Invalid Argument error suggests that you are not setting the width parameter legitimately. If this doesn't help let me know the value you saw in alert and we will try to further investigate.
how to get selected text from iframe with javascript ?
var $ifx = $('<iframe src="filename.html" height=200 width=200></iframe>').appendTo(document.body);
$(document.body).bind('click', function(){
var u_sel;
if(window.getSelection){
u_sel = ifx[0].contentWindow.getSelection();
// u_sel.text() InternetExplorer !!
alert(u_sel);
}
});
That should do it, as long as the iframe src is targeting your own domain.
Tested only on FireFox 3.6.7 so far.
function getIframeSelectionText(iframe) {
var win = iframe.contentWindow;
var doc = iframe.contentDocument || win.document;
if (win.getSelection) {
return win.getSelection().toString();
} else if (doc.selection && doc.selection.createRange) {
return doc.selection.createRange().text;
}
}
var iframe = document.getElementById("your_iframe");
alert(getIframeSelectionText(iframe));
As noted by jAndy, this will only work if the iframe document is served from the same domain as the containing document.