Skip to content

When I use "inline html", can not load js file #445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
GreatAuk opened this issue Mar 22, 2019 · 14 comments
Closed

When I use "inline html", can not load js file #445

GreatAuk opened this issue Mar 22, 2019 · 14 comments
Labels
Stale

Comments

@GreatAuk
Copy link

No description provided.

@GreatAuk
Copy link
Author

GreatAuk commented Mar 22, 2019 •
edited
Loading 

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ html: `
            <!DOCTYPE html>
            <html lang="en">
              <head>
              </head>
              <body style="background-color: red">
                <button>Button</button>
                <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.7/f2.min.js"></script>
                <script>
                  document.body.innerHTML = JSON.stringify(F2)
                </script>
              </body>
            </html>
          ` }}
          onMessage={event => {
            alert(event.nativeEvent.data);
          }}
        />
      </View>
    );
  }

These html have different performance on the browser.
image
image

@GreatAuk GreatAuk changed the title When I use "" When I use "inline html", can not load js file Mar 22, 2019
@harrisrobin
Copy link

Hi @GreatAuk,
thanks for submitting an issue!

Is loading the js file the only issue?
Can you run any JS at all?

@GreatAuk
Copy link
Author

Hi @GreatAuk,
thanks for submitting an issue!

Is loading the js file the only issue?
Can you run any JS at all?

Yes, loading the js file is only issue. The global variable(F2) is undefined

@Titozzz
Copy link
Collaborator

Titozzz commented Mar 28, 2019

Please connect to the webView by following the docs in the debugging session and see if there are any errors.

@GreatAuk
Copy link
Author

GreatAuk commented Mar 31, 2019 •
edited
Loading

Please connect to the webView by following the docs in the debugging session and see if there are any errors.

Js file downloaded successfully，get a error : "ReferenceError: Can't find variable: F2"
These html have different performance when I use a "uri" (works well) or "inline html" .
Here are the things I think are key（sorry, I just a newbie）

屏幕快照 2019-03-31 下午11 42 53

@httol
Copy link

httol commented Apr 28, 2019

same issue.

@httol
Copy link

httol commented Apr 28, 2019

请问楼主，最后怎么解决的。

@svdo
Copy link

svdo commented May 5, 2019 •
edited
Loading

I’m seeing a problem that is maybe the same. I have a web view with inline html source and injectedJavaScript. The functions that I declare in that injected JavaScript are not available when I then try to call them using injectJavaScript. But when I assign them to document as a work around (document.myFunction = myFunction) I can call them on document...

[edit] Please note that it works as expected on iOS.

@svdo svdo mentioned this issue May 5, 2019
Closed
@m1m6
Copy link

m1m6 commented Jun 25, 2019

Same here, it works on ios, not on android

@github-actions
Copy link

github-actions bot commented Sep 2, 2019

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

@github-actions github-actions bot added the Stale label Sep 2, 2019
@maxKimoby
Copy link

maxKimoby commented Oct 8, 2019 •
edited
Loading

Please reopen the issue.

I got the same issue, inline html is not accessible in the webView. However, when I included a script which methods are wrapped in an object, I can access it.

Screen Shot 2019-10-08 at 12 23 37 PM

Screen Shot 2019-10-08 at 12 24 07 PM

Screen Shot 2019-10-08 at 12 31 28 PM

@Jakob-Koschel
Copy link

Jakob-Koschel commented Nov 11, 2019 •
edited
Loading

Issue still persists in react-native-webview: 7.4.3 (Android only)

it is not possible to call/access any function/variables inserted with injectedJavaScript within injectJavascript calls.

This is broken:

  customJs = () => `
    const variable1 = "I am just a test";
    `;
...
<WebView
    ....
    injectedJavaScript={this.customJs()}
...

but when assigning them manually to window it works:

  customJs = () => `
    const variable1 = "I am just a test";
    window.variable1 = variable1;
    `;
...
<WebView
    ....
    injectedJavaScript={this.customJs()}
...

thanks for your tipp @svdo, however I think it would be better to put them under window than document.

@ccfz
Copy link

ccfz commented Apr 15, 2020

Still an issue on version 9.1.4. Workarounds work!

@svdo
Copy link

svdo commented Apr 15, 2020

thanks for your tipp @svdo, however I think it would be better to put them under window than document.

Yeah you're probably right, can't verify right now but that makes sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@harrisrobin @svdo @httol @ccfz @Titozzz @Jakob-Koschel @m1m6 @maxKimoby @GreatAuk