{"id":19286777,"url":"https://github.com/adobe-webplatform/iframeflow.js","last_synced_at":"2025-04-22T03:33:38.541Z","repository":{"id":19169032,"uuid":"22401157","full_name":"adobe-webplatform/iframeflow.js","owner":"adobe-webplatform","description":"A Javascript helper for cross-browser CSS Regions support","archived":false,"fork":false,"pushed_at":"2014-08-19T00:34:29.000Z","size":257,"stargazers_count":40,"open_issues_count":0,"forks_count":9,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-04-01T19:19:11.466Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe-webplatform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING","funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-30T00:12:35.000Z","updated_at":"2024-11-06T06:48:53.000Z","dependencies_parsed_at":"2022-09-07T17:51:47.910Z","dependency_job_id":null,"html_url":"https://github.com/adobe-webplatform/iframeflow.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fiframeflow.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fiframeflow.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fiframeflow.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fiframeflow.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe-webplatform","download_url":"https://codeload.github.com/adobe-webplatform/iframeflow.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250167614,"owners_count":21386004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T22:04:17.051Z","updated_at":"2025-04-22T03:33:38.270Z","avatar_url":"https://github.com/adobe-webplatform.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"iframeflow.js\n===========\n\niframeflow.js lets you use CSS Regions content written for WebKit browsers in \nInternet Explorer 10 or later.\n\n## Why\nIE supports an earlier version of the [CSS Regions][css-regions] specification, with a quirk: the flow-into property only applies to iframe elements.\n\niframeflow.js allows you to use the same regions content you built for Safari 7+ and use it as-is in IE10+.\n\n## Using iframeflow.js\n\nTo use iframeflow, simply include the script in your page.\n   \n    \u003cscript src='./iframeflow.js'\u003e\u003c/script\u003e\n\nYou then have two options to invoke iframeflow. \n\n### window.iframeflow.doc()\n\nThe `window.iframeflow.doc()` method is the simplest way to use iframeflow. It will scan your document's CSS and generate an iframe populated with the relevant content for each named flow it finds.\n\n### window.iframeflow.selector(query, flowName)\n\nThe `window.iframeflow.selector()` method allows you to assign a flow name to arbitrary content using a selector. Under the covers, iframeflow.js will copy the selected elements to a new iframe and set the `-ms-flow-into` of this iframe to the specified name.\n\n### Handling document updates\n\niframeflow.js does not automatically detect updates to named flow content. It is up to the author to call `window.iframeflow.doc()` or `window.iframeflow.selector()` whenever necessary. iframeflow.js will ensure existing iframes are re-created with the new content.\n\n### -webkit-flow* vs. -ms-flow*\n\nIf no -ms-flow* properties are defined, iframeflow.js will automatically convert any specified -webkit-flow-into or -webkit-flow-from properties to their -ms prefixed equivalents. This allows existing WebKit-compatible content to work as-is.\n\n\n## Building iframeflow.js\n\nTo edit and build your own version of the polyfill, you will need [node][node], [npm][npm], and [grunt][grunt]. To build:\n\n1. Clone the source code\n2. Enter the source directory\n3. Run `npm install`\n4. Run `grunt build`\n\nIf you are successful, you should see a `iframeflow.js` and `iframeflow.min.js` in your source directory.\n\n\n## Known Limitations \u0026 Issues\n\n* Flow names with non-ASCII or escape characters are currently ignored.\n* iframeflow.js does not currently scan style attributes for flow-into/flow-from properties.\n* iframeflow.doc() cannot scan cross-domain stylesheets for named flows. \n* Since the elements in a named flow are copied to a separate iframe document, any styling applied to them based on their ancestor(s) will be lost. \n* This version of iframeflow.js lets IE's engine handle all the layout work and limits itself to DOM node creation and cloning. It must be noted that iframeflow.js copies your named flows' content to new iframe documents. A future update may allow the content to be moved to the iframe instead.\n* Named flows definitions are gathered across all media queries, whether they match or not. If different breakpoints assign different content to the same flow name, iframeflow.js will populate a single iframe with all the different flows. A future update may fix this issue.\n\n## Browser Support\n\nThis library targets Internet Explorer 10 and later. It has no effect in other browsers.\n\n## Feedback\n\nPlease let us know if you have any feedback. If you run into any problems, you can file a [new issue][new-issue]. You can also reach us [@adobeweb][twitter].\n\n[css-regions]: http://www.w3.org/TR/css3-regions/\n[node]: http://nodejs.org\n[npm]: http://www.npmjs.org\n[grunt]: http://gruntjs.com\n[new-issue]: https://github.com/adobe-webplatform/iframeflow.js/issues/new\n[twitter]: http://twitter.com/adobeweb\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fiframeflow.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe-webplatform%2Fiframeflow.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fiframeflow.js/lists"}