import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import WebView from 'react-native-webview';
const HTML = `
iframe test
beforeContentLoaded failedsucceeded!
afterContentLoaded failedsucceeded!
`;
type Props = {};
type State = {
backgroundColor: string,
};
export default class Injection extends Component {
state = {
backgroundColor: '#FF00FF00'
};
render() {
return (
{}}
/* We set this property in each frame */
injectedJavaScriptBeforeContentLoaded={`
window.self.colourToUse = "green";
function declareSuccessBeforeContentLoaded(head){
var style = window.self.document.createElement('style');
style.type = 'text/css';
style.innerHTML = "#before_failed { display: none !important; }#before_succeeded { display: inline-block !important; }";
head.appendChild(style);
}
const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
if(head){
declareSuccessBeforeContentLoaded(head);
} else {
window.self.document.addEventListener("DOMContentLoaded", function (event) {
const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
declareSuccessBeforeContentLoaded(head);
});
}
`}
injectedJavaScriptForMainFrameOnly={false}
/* We read the colourToUse property in each frame to recolour each frame */
injectedJavaScript={`
function declareSuccessAfterContentLoaded(head){
var style = window.self.document.createElement('style');
style.type = 'text/css';
style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
head.appendChild(style);
}
declareSuccessAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
if(window.self.colourToUse){
window.self.document.body.style.backgroundColor = window.self.colourToUse;
} else {
window.self.document.body.style.backgroundColor = "cyan";
}
`}
/>
This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').
Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.
1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'green' as the "colour to be used".
1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.
2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour green will be injected into all frames. Otherwise, cyan.
2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.
✅ If the main frame, iframe_0, and iframe_1 all become green or cyan, then multi-frame injection is supported.
✅ If the two texts say "beforeContentLoaded succeeded!" and "afterContentLoaded succeeded!", then both injection times are supported.
❌ If the text "beforeContentLoaded failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.
❌ If the text "afterContentLoaded failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.
❌ If any frames become coloured cyan, then JS injection has failed before the content loaded (but succeeded after the content loaded).
❌ If only the main frame changes colour (to green or cyan), then multi-frame injection is not supported.
);
}
}