cerner / xfc Goto Github PK
View Code? Open in Web Editor NEWA javascript library for Cross Frame Communication
License: Apache License 2.0
A javascript library for Cross Frame Communication
License: Apache License 2.0
Slow loading images mess up the resize logic. If an image takes longer to load than than it takes for the Provider to trigger resize, the image won't be accounted for in the resize calculation. When the image does finally load, the iframe will be too small.
I think the Provider needs to add an event handler to trigger resize logic whenever an image loads
document.body.addEventListener(
'load',
function(event){
var tgt = event.target;
if( tgt.tagName == 'IMG'){
this.requestResize()
}
},
true
)
usecapture is required because image load events don't bubble.
Chromium is deprecating permissions in cross-origin iframes.
https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes
Documentation on custom iframe attribute for allow
links to this deprecated doc.
Getting script error 'hasAttribute' method or property undefined when our application is rendered in IE7. nil checks need to added around the hasAttribute property/method usage in provider.js file.
IE7
I have to send bedrock configuration to content provider, so I am adding this.trigger(‘message’, xxx) at authorized in orion-mpage-component-body.js. I can see in console that ‘this’ is the frame, but when I used it, its scope change to component and throws error.
Unable to access frame inside xfcInit.
Add this lines in "xfc.authorized"
var component = this.getProp("component");
this.trigger('message', component.getFilterMappingsObj());
F-Twelve adds a JS console to the DOM i.e. whenever console.log
is called, it writes that message to the DOM. However, when the DOM mutates, XFC writes to console.log
so F-Twelve writes the message to the DOM and the cycle repeats. This causes an endless loop, freezing the browser.
1.8.1
I would fix this on the F-Twelve side if I could but I don't think I can. The whole tool is designed around outputing console.log
messages to the DOM.
\example\embedded_app_lifecycle
head
tag in 2_c_provider_embedded_app.html
<link rel="stylesheet" href="f-twelve.css"/>
<script src="f-twelve.umd.js"></script>
FTwelve.show();
in the body's script
tag after XFC.Provider.init in 2_c_provider_embedded_app.html
Adding a breakpoint to the console.log
in logger.js
shows the self.requestResize()
in application.js
at the bottom of the stack.
It seems like this is meant to be called only on a resize, so maybe it needs to be smarter about detecting if the event is actually a resize or not. Another idea is add a special exception class (xfc-exclude-mutation-observer
for example) which I would add to the root element of f-twelve:
if(!Array.from(mutations).some((mutation) => parentHasClass(mutation.target, 'xfc-exclude-mutation-observer'))){
return self.requestResize()
}
The parentHasClass
helper function used above would be like:
const parentHasClass = function(element, className) {
if (element.classList && Array.from(element.classList).some((pClassName) => pClassName === className)){
return true;
} else {
return element.parentNode && parentHasClass(element.parentNode, className);
}
}
It is common for an MPage developer to use F-Twelve as well as cerner-smart-embeddable-lib, they should able to use them both at the same time.
As a consumer or content provider I would like the ability to send and wait for a response to a message
So that I may ask either the consumer or content provider for some information
I will know when complete when I can send a message to say my consumer asking for a value and my consumer can listen and respond to that message back to the calling event.
A simple example would be for consumer that is about to refresh their page asks its content providers if they are dirty before allowing the entire page to be destroyed. And upon check the page either refreshes or a message is displayed. The logic for both sides of the fence and event names would have to be handled by the individual's implementation but looking for a reusable way to provide this 'fire and wait' type of model rather than a 'fire and forget'. Grated this could be accomplished by providing a payload with a return event name but would be nice if was a first class method.
Is this project active? Can we archive this project? By archiving, previously release assets will be untouched, but support will cease for this project going forward. If anyone has any reasons this project should not be archived, please comment by March 1st.
Add meaningful error when Provider is not Initialized and a event is triggered or listener is added/called. For example, if Prover.trigger
is called when the Provider has not been initialized, it attempts to access this.application
which is created upon Provider.init()
. If the Provider has not been initialized, it throws the error
Error: Cannot read property 'trigger' of undefined
at Provider.trigger
This is error does not make it immediately obvious that the issue is related to the Provider initialization.
Provider.trigger()
without initializing the providerStarting from version 64, Chrome is deprecating permissions in cross origin iframes. Hence, iframe needs to have allow attribute where permissions can be set. Reference.
So, mount method in consumer has to allow passing attributes and ultimately set it on the iframe created here.
As a consumer or content provider I would like the ability to use callback functions triggered by 'beforeunload' events within the frame. This is useful to allow consumers to detect when content within the frame is about to be redirected and perform actions based on the event. I would also like to be able to extract the url of a link clicked in the event a link caused the redirect.
A simple example would be for a consumer that is about to link within the frame and needs to scroll to the top of the page based on the redirect. With this feature, a callback can be registered which is triggered by an 'xfc.unload' event to scroll the page to the top.
Using version 1.3.0 of xfc
Receiving the following error when embedded within an iframe
Unable to get property 'ADDITION' of undefined or null reference
xfc-1.0.1
IE 11.0.32 build 11.0.9600.18349CO (KB3160005)
Also logged issue against the mutation-observer for additional assistance.
The line of code that is throwing the error was here.
Unable to create in sample application with local, only reproducible on a citrix machine.
Content loads without javascript errors.
Attempted to utilize provided example within project to demonstrate triggering events into the content provider from the consumer. Receive the following error:
error message : Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://localprovider.com:8080’) does not match the recipient window’s origin (‘http://localconsumer.com:8080’)
https://github.com/cerner/xfc/tree/a74c23f11d033d8cd099a73f588ce30fe6e2d068
consumer: https://github.com/prateekgta/xfc/blob/master/example/cross_origin_communication/3_a_index.html
provider: https://github.com/prateekgta/xfc/blob/master/example/cross_origin_communication/3_a_provider.html
A message relayed and output in the console that event triggered to the content provider.
Several dependencies are out of date and have potential security vulnerabilities.
I took a brief look. It appeared most would be resolved by upgrading webpack-dev-server, webpack, and mocha versions.
The following code works fine with chrome. But, Firefox/Safari does not load the iframe.
XFC.init();
XFC.Consumer.mount(document.getElementById('video_frame'), "url://xxx");
But, setting the iframe.src through the browser console after the page load, renders the iframe properly.
Possible fix:
Setting iframe.src = this.source;
after this.wrapper.appendChild(iframe);
might fix the issue.
As a consumer I would like the the data-status to be changed to unloaded
only when the user navigates away from the page.
As a consumer of xfc i should be able to skip the mounting lifecycle so that i can reuse the same iframe and go through the remaining life cycle events of xfc launched and authorized so that i can skip the costly iframe creation operation
In a use case where we launch the provider using xfc initial life cycle events and in a refresh scenario where we launch the provider with same url with different authentication params i should be able to use the existing frame and go through the launched and authorized state
Ability to reuse the frame by skipping the mounting lifecycle event and go through the remaining lifecycle events
If the route to mount a content provider is protected by some other means, such as OAuth header validation, there is no need to challenge the consumer for a secret. In this casethe Provider.init will not contain a secret but only ['*'] to embed into its calling consumer. The existing Application.launch has a check against the presence of the secret but if one doesn't exist, as the example provides there is not an else noted at this point
} else {
this.authorizeConsumer();
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.