I am developing a responsive web app using React and try to use iframe to display PDF.
However, I found that only one page can display in iframe under IOS Safari.
I have read this stackoverflow but this is not work in PDF.
IFrame height issues on iOS (mobile safari)
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
base64Pdf:"XXXXXX"
}
render() {
return (
<div>
<iframe
src = {this.state.base64Pdf}
/>
</div>
);
}
}
export default App;
I would like to ask the solution to display all PDF pages in iframe under IOS Safari.
May I have any advise?
Related
In React native WebView , In webview there was a problem occur when click on link which open in new tap or new window ,the webview redirect our app to the browser but I want app not redirect to browser the webview override the link . Please solve the problem , I am very thinkful to you....
when click on any link in the website theses website redirect to our browser from our react native app
import React, { useState } from 'react';
import WebView from 'react-native-webview';
const App = () =>{
return(
<WebView
source={{uri:"https://www.coeju.com"}}
/>
);
}
export default App;
setSupportMultipleWindows={false}
add this in your webview props.
For more to know how this works, visit below link.
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#setsupportmultiplewindows
<WebView
{...restProps}
source={{uri}}
onLoadStart={()=>setloading(true)}
onLoadEnd={()=>setloading(false)}
onLoad={()=>setloading(false)}
style={{ flex: 1 }}
injectedJavaScript={INJECTEDJAVASCRIPT}
scrollEnabled
setSupportMultipleWindows={false} //This will solve your problem
>
From what I understood you can prevent the webview to redirect to an external browser and capture the URL that has been pressed and replace the current URI by storing it in the state.
you can try using the onShouldStartLoadWithRequest props of webview
const[uri,seturi]=useState('https://stackoverflow.com/')
<WebView
source={{uri}}
onShouldStartLoadWithRequest={request => {
if (request.url.includes('https')) {
seturi(request.url);
return false;
} else return true;
}}
/>
I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.
What I currently have is very simple. I have the google script on my index.html
and then my ad component which I'm calling under my App component.
import React from 'react';
export default class Ad extends React.Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render () {
return (
<div className='ad'>
<ins className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-4543556906953539'
data-ad-slot='3566322911'
data-ad-format='auto'
data-full-width-responsive="true"
/>
</div>
);
}
}
I was reading this thread and the answer was use googletags to manage served ads:
Using google adsense with React + React Router
However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?
I'm trying to to currently add an svg to my React-App.
I've got a nginX running that currently only servs one picture (localhost:80/ban.svg is reachable by browser and returns the correct icon).
import React from "react";
export class App extends React.Component{
render(){
return <img src={"localhost:80/ban.svg"}/>
}
}
Above Code doesn't work tho. It just says "Could not load the image" and displays the default browser error picture.
I'm fairly new to React, so sorry if this is something really obvious. Thanks for the help.
import React from "react":
export class App extends React.Component{
render(){
return <img src={"http://localhost:80/ban.svg"}/>
}
}
Try this
I have a site that is not a spa. At one point when a button is click a div is created in the dom. After the div is created I want to render a React component into this div. My component looks like this
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
return (
<div>
//Here will be more controls
</div>
);
}
}
I'm running webpack on this file and in my original page I'm referencing the generated js file.
What code should I add to my button click code that is adding the div so I can render the component?
ps. Actually the functionality is a bit more complex, because we are scraping a page the user specifies and showing the html in an iframe through the srcdoc attribute. The scraped html has the div added and then we render a widget in the div so the user can preview what our widget would look like on their page.
You have to use ReactDOM to render the component. Install and import react-dom in your project so that webpack bundles it for you. You might need to expose ReactDOM as global in your web pack configuration.
Below is a simple code snippet:
ReactDOM.render(
<MyComponent/> ,
document.getElementById(id) // id of element in your case div created
);
Reference
https://reactjs.org/docs/react-dom.html
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;