jQuery get variable value from another html page

StackOverflow https://stackoverflow.com/questions/23562147

  •  18-07-2023
  •  | 
  •  

Question

I have got an html page with this content, called "page1.html":

<div>
    <div id="content">
        content
    </div>
    <script type="text/javascript">
        var x=5;
        var y=2;
    </script>
    <div id="other">Some other content</div>
</div>

In another html page, I'd like to get the value of the variable "x" (5). This is the main page:

<!DOCTYPE html>
<html>
<head lang="en">
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="new_content"></div>
</body>
</html>

And this is the app.js script:

$(function(){
    $.get('page1.html', function(result){
        var obj = $(result).find('script');
        $(this).append($('#new_content').text(obj.html()));
    });
});

And the result is "var x=5; var y=2;". Is there a way to get only the value 5 from the var x?

Thanks for the help.

EDIT: I forgot to write that it's only an example, the code into the script in page1.html is more complex than the one shown. The object "obj" in app.js is an [object htmlscriptelement] so I'd like to know if a method/att exists that I can use to directly access the var x.

Was it helpful?

Solution 2

This seems like a bit of a weird thing to try and do.

I'll do my best to answer but it would be good to get a bit more context around why you want to do this as it might be that there's a better, cleaner way to do it.

My recommendation with the information that you've given would be to assign the values to a DOM object, jQuery is built to traverse the DOM and manipulate it, it's really not a good idea to try and parse raw javascript to extract variable values.

So, page 1 would look like this:

<div>
    <div id="content">
        content
    </div>
    <div class="myData" data-x="5" data-y="2" />
    <div id="other">Some other content</div>
</div>

Then my jQuery would look something like this:

$(function(){
    $.get('page1.html', function(result){
        var obj = $(result).find('script');
        var page1X = $(result).find('div.myData').data('x');
        var page1Y = $(result).find('div.myData').data('y');
    });
});

This is just pseudo code, but hopefully you get the idea.

Reference links:

OTHER TIPS

Or you can simply use localStorage in this way:

page1.html:

localStorage.setItem("x", "value"); //setter

page2.html:

var x = localStorage.getItem("x"); //getter

you could try to comment the vat y=... line before pasting the code like:

$(function(){
    $.get('page1.html', function(result){
        var obj = $(result).find('script');
        $(this).append($('#new_content').text(obj.html().replace('var y','//var y')));
    });
});

To get value from another html page for example page1

<input type="text" id="pageoneinputid" value="pageone">

on page two in the script tag

var a=$("#pageoneinputid").val()
document.getElementById("pagetwoinputid").innerHtml=a;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top