将一个HTML文件加载到另一个

时间:2017-03-25 03:37:23

标签: javascript html innerhtml filereader

我正在尝试将一个HTML文件加载到另一个HTML文件中。

的index.html

window.onload = function() {
        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');

        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    fileDisplayArea.innerText = reader.result;
                }

                reader.readAsText(file);    
            } else {
                fileDisplayArea.innerText = "File not supported!"
            }
        });
}

我发现要使用这个js代码,但是我没有使用按钮单击,而是希望读取文件并将其传递给innerHTML onload

index.js

    @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    View contentView = inflater.inflate(R.layout.lesson_fragment, container, false);

    gDetector = new GestureDetector(getActivity(), new GestureDetector.SimpleOnGestureListener(){

        @Override
        public boolean onDown(MotionEvent e) {
            Log.d("Down", "Down triggered!");
            return super.onDown(e);
        }

        @Override
        public boolean onFling(MotionEvent start, MotionEvent finish, float velocityX, float velocityY) {

            Log.d("Fling", "Motion detected!");

            // swipe left
            if(start.getX() - finish.getX() > 50){

                if(pos != 0){
                    pos --;
                    showLesson();
                }
                else{
                    Toast.makeText(getContext(), "You've reached the first lesson.", Toast.LENGTH_SHORT).show();
                }
            }
            else if(finish.getX() - start.getX() > 50){

                if(pos != LessonListFragment.lessonsList.size()){
                    pos ++;
                    showLesson();
                }
                else{
                    Toast.makeText(getContext(), "You've finished all the lessons.", Toast.LENGTH_SHORT).show();
                }
            }

            return super.onFling(start, finish, velocityX, velocityY);
        }
    });

    contentView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            return gDetector.onTouchEvent(motionEvent);
        }
    });

    pos = getArguments().getInt("index");

    topic = (TextView) contentView.findViewById(R.id.lesson_frag_topic);
    topic_des = (TextView) contentView.findViewById(R.id.lesson_frag_desc);
    syntax = (TextView) contentView.findViewById(R.id.lesson_frag_syntax);
    example = (TextView) contentView.findViewById(R.id.lesson_frag_example);

    try_example = (Button) contentView.findViewById(R.id.lesson_try);
    try_example.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            // Show practice activity.
        }
    });

    lesson_content_container = (FrameLayout) contentView.findViewById(R.id.lesson_content_container);

    tip_msg = (TextView) contentView.findViewById(R.id.tip_msg);
    tip_msg.setText(R.string.lesson_content_tip);

    close_tip = (ImageButton) contentView.findViewById(R.id.close_tip);
    close_tip.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            lesson_content_container.removeViewAt(1);
        }
    });

    showLesson();

    return contentView;
}

谢谢,这里还需要window.onload = function()吗?

1 个答案:

答案 0 :(得分:0)

在html中,您可以使用Iframe

将其他html文件加载到一个html文件中
<!DOCTYPE html>
<html>
<body>

<iframe src="header.html">
  <p> display</p>
</iframe>

</body>
</html>

或者您可以参考这些社区链接

How to include an HTML page into another HTML page without frame/iframe?

Insert one HTML file into another HTML file

没有iframe试试这个 给你的div提供id

 document.getElementById("your div id").innerHTML='<object type="text/html" data="home.html" ></object>';