iframe-injectable
Advanced tools
Simple typescript function allowing one to inject into iframe any javascript, styles, css that is desired.
import iframe from 'iframe-injectable';
const successDiv = document.createElement('div');
successDiv.setAttribute('name', 'success');
successDiv.appendChild(document.createTextNode('Success!'));
const successSpan = document.createElement('span');
successSpan.appendChild(document.createTextNode('Span success'));
// Load iframe
const frame = iframe('#frame') // Access iframe by query selector (can access it by index of iframe on page (n-th iframe), or by passing HTMLIFrameElement)
.dom(successDiv) // Add div to body
.dom(successSpan, '[name="success"]') // Add span to element named success
.style('body { background-color: pink; }') // Add styles to within iframe
.css('style.css') // Add css link with this rel
.js((window, document) => { // on load execute this javascript with 'window' and 'document' being from within iframe
console.log(window.innerWidth); // reads 640 in testproject
document.body.appendChild(document.createTextNode('Success!!'));
});
(async () => {
console.log((await frame.head())?.baseURI); // gets iframe <head> tag and reads base uri
console.log((await frame.body())?.className); // gets iframe <body> tag and reads its classname
console.log(await iframe(1).test()); // Will return false since iframe cannot access document.body of wikipedia iframe
})();
This package may throw CORS errors if you try and edit an iframe which is from cross-domain without proper policy.
Can now test CORS accessibility with .test() method, which returns a boolean promise
If you discover any bugs, or have ideas about improving this package, do not hesitate to file in an issue or create a pull request.
FAQs
Library for iframe style/js/html injection
The npm package iframe-injectable receives a total of 2 weekly downloads. As such, iframe-injectable popularity was classified as not popular.
We found that iframe-injectable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.